Mobile View Squarespace Custom CSS - Not Working?

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,

Which code are you referring to? We can add query code to make it run on desktop only

Quote

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