RebelRuthDesignStudio

Site URL: http://www.lexhamilton.co.uk Hello! I am just trying to adjust my mobile view using custom CSS, as there are a few images I'd like to hide on a mobile view. I've used the following code as found on another forum, and it seems to work when I paste it at the top of the CSS code, however as it is 'mobile view' it then messes up the rest of the code for desktop, meaning my fonts aren't showing on mobile etc. Password to site: ruthh Please help! Here is the full code for reference, the mobile view bit I'm having problems with is right at the bottom. On the site, the images I am trying to hide are the left and right of the series of three images of Weddings. Events and Styling - so just the image in the center with the button should remain. @font-face { font-family: 'Analogue'; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/6321e9814fd1d20c06702503/1663166849267/Analogue.woff2) format('woff2'); src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/6321e9814fd1d20c06702503/1663166849267/Analogue.woff2) format('woff'); } h1, { font-family: 'Analogue' !important } @font-face { font-family: 'Jules'; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/6321e98407a8e84f0441837b/1663166852426/Jules-Regular.woff2) format('woff2'); src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/6321e98407a8e84f0441837b/1663166852426/Jules-Regular.woff2) format('woff'); } h2, { font-family: 'Jules' !important } @font-face { font-family: LOSTLOVERSITALIC; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/6321e97ed5a4d66c192be91d/1663166846059/LostLovers-Italic.woff2) !important; } @font-face { font-family: LOSTLOVERSREG; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/6321e97bf2bc644e5671018c/1663166843459/LostLovers.woff2) !important; } @font-face { font-family: ANALOGUE; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/6321e9814fd1d20c06702503/1663166849267/Analogue.woff2) !important; } @font-face { font-family: JULES; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/6321e98407a8e84f0441837b/1663166852426/Jules-Regular.woff2) !important; } @font-face { font-family: HELVETICA; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/6321e97849a9361204019e58/1663166840158/HelveticaNeue+Thin.woff2) !important; } h3 { font-family: 'LOSTLOVERSREG' !important; } h4 { font-family: 'JULES' !important; } .sqsrte-large { font-family: 'ANALOGUE' !important; } p { font-family: 'ANALOGUE' !important; } .sqsrte-small { font-family: 'HELVETICA' !important; } // Site Title // .header-title-text a { font-family: ANALOGUE !important; } // Site Navigation // .header-nav-item a { font-family: ANALOGUE !important; } // Button // .header-actions-action .btn { font-family: ANALOGUE !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: ANALOGUE !important; } // Small Button // .sqs-block-button-element--small { font-family: ANALOGUE !important; } // Medium Button // .sqs-block-button-element--medium { font-family: ANALOGUE !important; } // Large Button // .sqs-block-button-element--large { font-family: ANALOGUE !important; } // Image Block Button // .image-button a { font-family: ANALOGUE !important; } // Blog Page Post Title // .blog-title { font-family: ANALOGUE !important; } // Blog Page Post Descriptions // .blog-excerpt p { font-family: ANALOGUE !important; } // Blog Page Read More Link // .blog-more-link { font-family: ANALOGUE !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: ANALOGUE !important; } h3.portfolio-title { font-family: ANALOGUE !important; font-size: 25px !important; } .header-menu-nav-item a { font-family: ANALOGUE !important; } .homepage #block-dec3b3e50716f5db7636 { animation: fade-me-in 2s; } @keyframes fade-me-in { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} } [data-section-id="62a0da54a3d9b23ac4d2fa8c"] .content-wrapper{ padding-left: 0!important; padding-right: 0!important; margin: 0!important } .Marquee { width:100vw!important } #page{ overflow-x: hidden } [data-section-id="62a0f38a866ba666d895af90"] .content-wrapper{ padding-left: 0!important; padding-right: 0!important; margin: 0!important } .Marquee { width:100vw!important } #page{ overflow-x: hidden } body { border:15px solid #680e12; } header { margin:15px 15px 0 15px; } @media only screen and (min-width: 640px){ [data-section-id="62a1b74522d81635bc7069e1"] .section-background { width: 50%; margin-left: 50%!important; background-color:#ea899e } section[data-section-id="62a1b74522d81635bc7069e1"] .content-wrapper { width: 50%; margin-left: 0%!important; background-color:#ea899e } } .header-nav-folder-content { background: transparent !important; } } /* add header nav hover effect */ .header-nav-wrapper a:hover { color: #dc8e9f !important; /* CSS FOR MOBILE */ @media only screen and (max-width: 640px) { ##block-fc2d1ca37d41e0176f54, #block-d4992a409489ef1603bb, #block-6329edd84394c6fd0628d2bd, #block-6329edd8a53e3c4df9f54b90, #block-6329eedfbf501c2e5d4522a6, #block-6329eedfa340d45d93352e89 { display: none; } }

Hi guys, Hoping someone can help me with something similar to above. I've added in custom CSS code for my fonts across my site, and I can view it fine but my client cannot. I've checked the code and can't see any issues. Can anyone help to as to why I can view it on my mac but she can not view it on her mac? We are both using Google Chrome. She cannot see any of the custom fonts I've used across the site. Screenshots are of what I can see, and what she can see. Pasting the code below. Please help! I've never had this issue before and stuck on how to troubleshoot. Website is www.lexhamilton.co.uk password is ruthh Thanks in advance, Ruth @font-face { font-family: LOSTLOVERSITALIC; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c158173779139047b343/1654702424092/LostLoversItalic.ttf) !important; } @font-face { font-family: LOSTLOVERSREG; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c88bc2322a3c168f7da1/1654704267223/LostLoversRegular.ttf) !important; } @font-face { font-family: ANALOGUE; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c18e85ef19473da9369d/1654702479025/Analogue.otf) !important; } @font-face { font-family: JULES; src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c1a7677f6b5013ed53f9/1654702504085/Jules-Regular.otf) !important; } h1 { font-family: 'Analogue'!important; } h2 { font-family: 'JULES'!important; } h3 { font-family: 'LOSTLOVERSREG'!important; } h4 { font-family: 'JULES'!important; } .sqsrte-large { font-family: 'ANALOGUE'!important; } p { font-family: 'ANALOGUE'!important; } .sqsrte-small { font-family: 'HELVETICA'!important; } // Site Title // .header-title-text a { font-family: analogue !important; } // Site Navigation // .header-nav-item a { font-family: analogue !important; } // Button // .header-actions-action .btn { font-family: analogue !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: analogue !important; } // Small Button // .sqs-block-button-element--small { font-family: analogue !important; } // Medium Button // .sqs-block-button-element--medium { font-family: analogue !important; } // Large Button // .sqs-block-button-element--large { font-family: analogue !important; } // Image Block Button // .image-button a { font-family: analogue !important; } // Blog Page Post Title // .blog-title { font-family: analogue !important; } // Blog Page Post Descriptions // .blog-excerpt p { font-family: analogue !important; } // Blog Page Read More Link // .blog-more-link { font-family: analogue !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: analogue !important; } h3.portfolio-title { font-family: analogue !important; font-size: 25px !important; } .header-menu-nav-item a { font-family: analogue !important; } .homepage #block-dec3b3e50716f5db7636 { animation: fade-me-in 2s; } @keyframes fade-me-in { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} } [data-section-id="62a0da54a3d9b23ac4d2fa8c"] .content-wrapper{ padding-left: 0!important; padding-right: 0!important; margin: 0!important } .Marquee { width:100vw!important } #page{ overflow-x: hidden } [data-section-id="62a0f38a866ba666d895af90"] .content-wrapper{ padding-left: 0!important; padding-right: 0!important; margin: 0!important } .Marquee { width:100vw!important } #page{ overflow-x: hidden } body { border:15px solid #680e12; } header { margin:15px 15px 0 15px; } @media only screen and (min-width: 640px){ [data-section-id="62a1b74522d81635bc7069e1"] .section-background { width: 50%; margin-left: 50%!important; background-color:#ea899e } section[data-section-id="62a1b74522d81635bc7069e1"] .content-wrapper { width: 50%; margin-left: 0%!important; background-color:#ea899e } } @media only screen and (min-width: 640px){ section[data-section-id="62a1b80d2def6f30e9cf3a10"] .section-background { width: 50% } section[data-section-id="62a1b80d2def6f30e9cf3a10"] .content-wrapper { width: 50%; margin-left: 50%!important; background-color:#b62b35 } .header-nav-folder-content { background: transparent !important; } } /* add header nav hover effect */ .header-nav-wrapper a:hover { color: #dc8e9f !important; }