Services Boxes don't adjust to mobile screen

[hejo]

Hi,

the service boxes on our landingpage aren't adjusting to a mobile screen properly. How can I make sure that the boxes get displayed below each other and the writing doesn't get cut off?

Thank you!

[Jsum · Accepted solution]

Hi @hejo ,

This is a a mobile responsiveness issue that can be solved using media queries. The problem is that There are plenty of ways to create that layout (flexbox, grid, floats, tables, ul columns...) so the solution could be any number of things. We can check it out for you if you will provide a shareable preview link to the page. 

Need help? Hire Us Here

[derekcavaliero · Accepted solution]

As @Jsum mentioned, the issue is there is a style rule to set those box widths at 50% for all device sizes. In reality that rule should be inside something like a media query to test that there is enough vertical width to accomodate the content inside those boxes in a 2 column format.

You'd need to do something like this for the element in question:

/* default element width to 100% */
@media screen and (min-width: 768px) {
/* Set element width to 50% */
}

Looks like that element has a few different rules in it's cacscade that you'll need to work around. One looks like its not taking a mobile-first approach (using max-width instead of min-width breakpoints).

[Jsum · Accepted solution]

Hi @hejo ,

This is a a mobile responsiveness issue that can be solved using media queries. The problem is that There are plenty of ways to create that layout (flexbox, grid, floats, tables, ul columns...) so the solution could be any number of things. We can check it out for you if you will provide a shareable preview link to the page. 

Need help? Hire Us Here

[derekcavaliero]

@hejo 

Can you provide an example URL? It's likely some custom CSS that is preventing the HubSpot columns from stacking as they normally would.