Jump to content

Making mobile look like desktop with 3 columns for certain pages.

Recommended Posts

Site URL: https://www.lilahbeau.com

Hi we are trying to make our mobile site look similar to our desktop version for our home page which has 3 items put next to each other in a 3 column look.   We also have a couple of pages that have 2 columns and would like this to show on mobile.

I've tried implementing many different codes and using dev tools to try and find the section ids, but can not figure it out.   

Thank You!   

Homepage :      www.LilahBeau.com
would like this to show the 3 sections under the featured slide

About:  https://lilahbeau.squarespace.com/the-lilah-beau-story
Would like this to show 2 columns similar to the desktop version

The Collection:   https://lilahbeau.squarespace.com/the-collection
Would like this to show 2 columns similar to the desktop version

 

 

Link to comment
  • Replies 7
  • Views 950
  • Created
  • Last Reply

Add to Design > Custom CSS

@media screen and (max-width:767px) {
/* Homepage */
div#block-yui_3_17_2_1_1633024183472_5632+.row .span-4 {
    width: 33.33333% !important;
    float: left !important;
}
}

With 2 other pages, you mean text (left) - Image (right) or image (left) - text (right) on mobile?

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
On 10/3/2021 at 7:32 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
/* Homepage */
div#block-yui_3_17_2_1_1633024183472_5632+.row .span-4 {
    width: 33.33333% !important;
    float: left !important;
}
}

With 2 other pages, you mean text (left) - Image (right) or image (left) - text (right) on mobile?

Either of those are fine.   I inserted your code into Custom CSS and am not seeing any change to site.   Am I doing something wrong? 

Link to comment
18 minutes ago, tuanphan said:

I see it worked here

Yes THANK YOU that actually did work once I stripped out other CSS I had in there.  Must have been conflicting. Now I'm trying to get it to look good with changing the text size etc.  

Right now I have these in there. 

// Paragraph

 h1 {font-size:1rem!important} 

// Header h2
 h2 {font-size:1rem!important} 

// Header h3
 h3 {font-size:1rem!important} 
 
 // Header h4
 h4 {font-size:0.65rem!important} 

}
  
// Paragraph
 p {font-size:0.75rem!important} 


I would still like to get the right ID for those other 2 pages, but do you know how to fix this I put the titles on Header 4 to control them instead of Paragraph  (see photo) 
But the spacing when it goes down a line is too much.  

Thanks!

1256560164_ScreenShot2021-10-05at8_03_11PM.png.a6b5f9c3c9008116ab59e978bd0df3e4.png

Link to comment
On 10/6/2021 at 10:05 AM, LILAHBEAU said:

Yes THANK YOU that actually did work once I stripped out other CSS I had in there.  Must have been conflicting. Now I'm trying to get it to look good with changing the text size etc.  

Right now I have these in there. 

// Paragraph

 h1 {font-size:1rem!important} 

// Header h2
 h2 {font-size:1rem!important} 

// Header h3
 h3 {font-size:1rem!important} 
 
 // Header h4
 h4 {font-size:0.65rem!important} 

}
  
// Paragraph
 p {font-size:0.75rem!important} 


I would still like to get the right ID for those other 2 pages, but do you know how to fix this I put the titles on Header 4 to control them instead of Paragraph  (see photo) 
But the spacing when it goes down a line is too much.  

Thanks!

1256560164_ScreenShot2021-10-05at8_03_11PM.png.a6b5f9c3c9008116ab59e978bd0df3e4.png

Hi,

You mean reduce text size (title + paragraph?)

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
On 10/8/2021 at 10:54 PM, LILAHBEAU said:

Thanks @Tuanphan I think I figured out a solution for that one.   

Can you possibly help me with making this page show 2 column style on mobile?    
I've tried adapting the previous code you gave to the block sections on this page with no luck. 

https://www.lilahbeau.com/the-collection

 

Thanks! 

Hi,

You mean

text/image side by side, same as desktop?

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

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.