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

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
 

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?

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? 

I see it worked here

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!

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!

Hi,

You mean reduce text size (title + paragraph?)

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! 

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?