Big issues with responsive scaling across devices

Hey legends at the Apex forums! :slight_smile:

I’m having some scaling issues with some category images and a Navigation Collapsed menu on my homepage across different devices and I was hoping I could get some assistance.

It looks great and how I would like it to across all devices (except for mobile given size constraints) on widescreen monitors and Macbooks which is this:

A friend had a look on her samsung tablet and it looks like this and I have no idea what’s causing it:

In the Cornerstone preview for smaller screens it shows up resizing as this which is still not ideal (would like it to look more like the first picture) but as I linked above it seems to be far different to this:

It looks okay on mobile but I can’t get it to centre with everything I’ve tried and fear breaking the entire layout as it’s taken me a while to get it where it is currently :blush:

If the menu size could scale as well as the pictures I think this would remedy the problem but I am unfamiliar with flexboxes and CSS coding and would really appreciate some guidance and assistance with this issue. My ideal result would be for it to look like the first picture on all devices but mobile and to have it centred on mobile. This page is the homepage located at http://www.smokedreams.com.au ; the site is currently behind a construction wall but if there’s a way you could help me out I am happy to provide some login credentials upon a reply.

Thank you so much in advance for your time and assistance. :slight_smile: Kind regards.

Hey Jaquelyn,

It would be our pleasure to help you out. We need to see the page structure though in order for us to determine what’s causing the issue so please give us WordPress Admin access in a Secure Note.

Thanks.

Hey Christian!

Thank you very much for your swift reply, I have created an admin account for you to utilise below:

I really appreciate the assistance :slight_smile:

Hey Jaquelyn,

I checked your setup and it’s complex due to custom CSS. Regretfully, fixing custom CSS is outside the scope of our support.

I’d recommend you rebuild your section using the layout system provided by Cornerstone. I’ve set up a copy of your section using the builder’s layout system only and it’s easier and requires no coding. Please watch the video below to see how it was done.

Please note that for mobile screens, the aspect ratio of the images does not match the aspect ratio of the column so you see a blank space. This is not a limitation of our theme. It’s simply a spatial limitation and no theme can do anything about that. With that said, you need to rethink your tablet to mobile layout. I’ve provided a sample of what you can do in the video.

Please learn the rest from the video below and our Youtube Channel.

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.