How to Improve Mobile Responsiveness for a Storage Service Website with CSS?

HTML & CSS
1

I’m working on improving the mobile responsiveness[/b] of a website I manage for a storage service business in Dubai — https://smartboxstorage.ae/. The current layout looks fine on desktop, but on smaller devices, some elements (like the contact buttons and infographics) don’t align properly or get cut off.
I’m using basic HTML and CSS, with some Flexbox and media queries, but I’m not sure if I’m structuring things efficiently. My questions:

  • What’s the best way to handle image-heavy sections (like infographics) on mobile?
    Is it better to hide certain desktop elements on mobile or adapt them?
    Any tips or layout patterns specifically good for service-based websites like this?

Would appreciate any feedback, or examples of better practices.
Thanks in advance!

3

What I am seeing is a lot of floats being used rather than flexbox. Just looking overall it seems to me the HTML could be refactored and simplified — there is a lot of nesting.

Flexbox could be used for your header/nav sections, which would allow for better alignment. For the main sections like services maybe CSS grid could be used with a mobile first approach. There are 8 services listed, two columns doesn’t work for mobile (too small), but would viewers want to scroll through all 8 services? Not sure what to suggest there.

Overall CSS flexbox and grid would make for more robust responsive styling.

1 Like