Jump to content

Disable mobile styles 7.1

Go to solution Solved by Ziggy,

Recommended Posts

26 minutes ago, ejh said:

I need to disable mobile styles so my website is exactly the same as the desktop when viewed on other devices.

This isn't really possible, and websites that aren't optimized for mobile devices are generally much worse for people to use. Since you're using 7.1 you should be able to control the design on mobile to mimic the look of the desktop site whilst being usable on mobile.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy

Here are a few problems I need to solve then. Compare all screenshots to my desktop site (emmahearnes.com)

1. Type in the footer is too large but when I change it it changes the desktop version too

2. (art page) I want the slideshow reel to show 3 pictures like on the desktop site, not one that is the full width

3. I want to make certain text centre justified on mobile but keep it as is on desktop.

Thanks!

Screenshot 2023-08-22 192739.png

Screenshot 2023-08-22 211727.png

Edited by ejh
Link to comment
  • Solution
5 minutes ago, ejh said:

1. Type in the footer is too large but when I change it it changes the desktop version too

Add this and adjust the values:

@media only screen and (max-width:767px) {
 #footer-sections {
  p {
    font-size:0.7rem;
  }
  .sqsrte-small {
    font-size:0.6rem;
  }
 }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
7 minutes ago, ejh said:

2. (art page) I want the slideshow reel to show 3 pictures like on the desktop site, not one that is the full width

Try this Custom CSS:

@media only screen and (max-width:767px) {
  .gallery-reel {
    height: 20vh !important;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
10 minutes ago, ejh said:

3. I want to make certain text centre justified on mobile but keep it as is on desktop.

You may have to target these individually with the block IDs, as an example this should work for the text under biography and "BRUNSWICK STREET GALLERY – 2020" on the Art page:

@media only screen and (max-width:767px) {
  #block-26efca4b5defb795fb15, #block-7574ab8a2469098ffb37 {
    text-align:center !important;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...

Something like this, adjust the values:

@media only screen and (max-width:767px) and (orientation: portrait) {
  section[data-section-id="64aa39b78a47db6a5eef808e"] {
    h1 {
      font-size:10vw;
    }
  }
}

Drop me a like if that helped.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 9/5/2023 at 6:58 PM, Ziggy said:

Something like this, adjust the values:

@media only screen and (max-width:767px) and (orientation: portrait) {
  section[data-section-id="64aa39b78a47db6a5eef808e"] {
    h1 {
      font-size:10vw;
    }
  }
}

Drop me a like if that helped.

@Ziggy this isn't making any changes for me?

I am guessing I am meant to sub in the id of the block of text, which I found via inspect. But it did not change the text size:
@media only screen and (max-width:767px) and (orientation: portrait) {
  section[data-section-id="yui_3_17_2_1_1693963076920_488"] {
    h1 {
      font-size:10vw;
    }
  }
}

Link to comment

Try this adjustment:

@media only screen and (max-width:767px) {
  section[data-section-id="64aa39b78a47db6a5eef808e"] {
    h1 {
      font-size:10vw !important;
    }
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 9/7/2023 at 5:46 PM, Ziggy said:

Try this adjustment:

@media only screen and (max-width:767px) {
  section[data-section-id="64aa39b78a47db6a5eef808e"] {
    h1 {
      font-size:10vw !important;
    }
  }
}

@Ziggy This is still not changing the font size in mobile.

I am trying to get it so that 'emma can be found' is on one line like in the desktop version. Any idea why the code is not making any change?

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.