Jump to content

Mimic Mobile Site Formatting for Tablet Site (instead of mimicking Desktop)

Go to solution Solved by tuanphan,

Recommended Posts

Add to Design > Custom CSS

/* Homepage tablet */
@media screen and (max-width:991px) and (min-width:768px) {
body.homepage article .content {
    width: 100% !important;
}
body.homepage figure {
    flex-direction: column !important;
}
body.homepage .intrinsic {
    width: 100% !important;
}
body.homepage figcaption.image-card-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 10px !Important;
}}

 

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

Hi Tuanphan,

Thank you very much for helping with the custom code for my website.

I have input the code in 'Design > Custom CSS'. It has worked very nicely for my homepage, however, I'm looking to have the same format as on my mobile site for every page when viewed on a tablet.

Is this possible?

Below is the current tablet and mobile sites for the locations page as an example. I would like them to look the same.

IMG-0147.thumb.PNG.40925d21a6459bd2826ea8aaf51d3e0e.PNG

IMG-4596.thumb.PNG.28a1d353f1abba5f53cbbdd408e5f4d3.PNG

 

Another slight issue is that the footer is still the same as on the desktop. Is it possible to make it the same as the mobile site as well? The images below show the difference between the footers on the tablet and mobile sites.

 

IMG-0146.thumb.PNG.700a119d62242ea434f029c7ba3768e9.PNG

 

 

IMG-4595.thumb.PNG.d7c3452ea244663bbecd69e01cc498ab.PNG

Thanks again!

Alex

Edited by AlexRich
Link to comment
On 3/8/2022 at 4:02 PM, AlexRich said:

Hi Tuanphan,

Thank you very much for helping with the custom code for my website.

I have input the code in 'Design > Custom CSS'. It has worked very nicely for my homepage, however, I'm looking to have the same format as on my mobile site for every page when viewed on a tablet.

Is this possible?

Below is the current tablet and mobile sites for the locations page as an example. I would like them to look the same.

IMG-0147.thumb.PNG.40925d21a6459bd2826ea8aaf51d3e0e.PNG

IMG-4596.thumb.PNG.28a1d353f1abba5f53cbbdd408e5f4d3.PNG

 

Another slight issue is that the footer is still the same as on the desktop. Is it possible to make it the same as the mobile site as well? The images below show the difference between the footers on the tablet and mobile sites.

 

IMG-0146.thumb.PNG.700a119d62242ea434f029c7ba3768e9.PNG

 

 

IMG-4595.thumb.PNG.d7c3452ea244663bbecd69e01cc498ab.PNG

Thanks again!

Alex

Hi. Sorry for the delay. Can you share link to some pages where you have problem? I will try test new 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

Hi Tuanphan,

Thank you for getting back to me - much appreciated!

I have added your code which has fixed the homepage (other than the footer), however, the other pages still have the same formatting as the desktop view.

Some examples are:

https://www.sigmascreed.co.uk/liquid-screed

https://www.sigmascreed.co.uk/floor-preparation

https://www.sigmascreed.co.uk/underfloor-heating

https://www.sigmascreed.co.uk/locations

 

Many thanks,
Alex

 

 

Link to comment
8 hours ago, AlexRich said:

Hi Tuanphan,

Thank you for getting back to me - much appreciated!

I have added your code which has fixed the homepage (other than the footer), however, the other pages still have the same formatting as the desktop view.

Some examples are:

https://www.sigmascreed.co.uk/liquid-screed

https://www.sigmascreed.co.uk/floor-preparation

https://www.sigmascreed.co.uk/underfloor-heating

https://www.sigmascreed.co.uk/locations

 

Many thanks,
Alex

 

 

Try this new code

/* Homepage tablet */
@media screen and (max-width:991px) and (min-width:768px) {
body article .content {
    width: 100% !important;
}
body figure {
    flex-direction: column !important;
}
body .intrinsic {
    width: 100% !important;
}
body figcaption.image-card-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 10px !Important;
}}

 

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

Hi Tuanphan,

Thanks for your help.

Your code worked very well for most of the pages. However, the formatting for the following page (and the other location pages) are still the same as for the desktop site.

https://www.sigmascreed.co.uk/locations

Is it also possible to change the footer, so that it appear the same as on the mobile site when viewed on tablets (i.e. with the data in rows as opposed to in  3 columns?

image.png.a225894c6c940b4e706d3690f06fe6ce.png

image.png.8d7828ed3e192d836e21ea2b4d605c24.png

 

Thanks again for your help!

Alex

Link to comment
  • Solution
9 hours ago, AlexRich said:

Hi Tuanphan,

Thanks for your help.

Your code worked very well for most of the pages. However, the formatting for the following page (and the other location pages) are still the same as for the desktop site.

https://www.sigmascreed.co.uk/locations

Is it also possible to change the footer, so that it appear the same as on the mobile site when viewed on tablets (i.e. with the data in rows as opposed to in  3 columns?

image.png.a225894c6c940b4e706d3690f06fe6ce.png

image.png.8d7828ed3e192d836e21ea2b4d605c24.png

 

Thanks again for your help!

Alex

Add to Design > Custom CSS

/* Tablet Locations */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-6223428d12478706cf95b69c .span-3 {
    width: 100%;
}
footer.sections .col {
    width: 100% !important;
}
}

 

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
  • 2 weeks later...

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.