Jump to content

Mobile View Squarespace Custom CSS - Not Working?

Recommended Posts

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;
 }
 
}
 

 

 

Screenshot 2022-09-20 at 18.01.42.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.