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

Site URL: http://www.sigmascreed.co.uk

Hi,

I have optimised the appearance of my site for desktop and mobile.

The issue I am having is that the design and formatting looks pretty awful when viewed on a tablet.

Please can someone help me to make the formatting for tablet the same as the mobile site (instead of copying the desktop site)?

Many thanks,

Alex

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

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.

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.

Thanks again!

Alex

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.

 

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.

 

 

 

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

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

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

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?

Thanks again for your help!

Alex

Hi Tuanphan,

This worked perfectly.

Thanks so much!

Alex