.visit-map{ width:640px; height:600px; #map{ width:100%; height:100%; } } .visit-infos{ padding-left:140px; .visit-logo{ padding-bottom:40px; img{ width:194px; } } .visit-line{ border-bottom:1px solid rgba(0, 0, 0, 0.05) } .info-operate{ padding:40px 0px; .operate-item{ flex:1; text-align: left; .operate-numbers{ font-weight: 700; } } } .visit-address{ padding:40px 0px; font-weight: 400; span{ border-radius: 100px; background: rgba(105, 114, 21, 1); color:white; font-size:14px; line-height: 14px; padding:3px 9px; font-weight: 600; } } .visit-links{ padding:40px 0px; display:flex; justify-content: space-between; .info-btn{ text-align: center; .info-btn-img{ width:60px; margin-bottom:12px; } } } } .visit-map-link{ padding-top:40px; } /************ BreakPoints ************/ // Small devices (landscape phones, 576px and up) @media (max-width: 576px) { } // Medium devices (tablets, 768px and up) @media (max-width: 768px) { } // Large devices (desktops, 992px and up) @media (max-width: 992px) { } // X-Large devices (large desktops, 1200px and up) @media (max-width: 1200px) { } // XX-Large devices (larger desktops, 1400px and up) @media (max-width: 1400px) { .visit-infos{ padding:0; padding-bottom:20px; flex:1; } .visit-map{ width:100%; height:auto; flex:1; #map{ height:400px; padding-bottom:20px; } } .visit-map-link{ padding-top:20px; padding-bottom:20px; text-align: center; } } @media (max-width: 1510px) { .visit-link-mobile-hidden{ display:none; } }