Optimising Layout for Mobile

Highlighted
New Contributor

I'm currently putting together a new About page for my company but when previewing it for mobile and tablet the layout is just awful. 

Preview link: http://info.altinet.co.uk/?hs_preview=lIKRDQtI-25642712201 

 

Other than the initial row of hover images which I coded myself without mobile in mind, so I can understand their broken layout, the rest of the page is mainly made up of rich text modules relying on tables for structure.

The problem is that although the tables and cells themselves will change in size to suit the screen based on their set percentages, the font and image sizes stay exactly the same, making them overlap into other cells or off the screen entirely. 

 

Does anyone know a simple solution for fixing how this content resizes across screens?

 

Screenshots attached comparing one section's layout on desktop vs mobile:Desktop.PNGMobile.PNG

Reply
0 Upvotes
1 Reply 1
Highlighted
Occasional Contributor

Hi Hayleigh,

 

If your tables are responsive and will scale with mobile, try assigning percentage widths to the images themselves. Here's an example of the CSS you'd add to your stylesheet if you wanted the images to take up all of the horizontal space in the table cell:

 

.responsive-image {
width: 100%;
height: auto;
}

 

If you're only using inline styling, you can set this CSS in the Source Code area of the text editor like this:

 

<img src="your-image.jpg" alt="your alt tag" style="width: 100%; height: auto;" width="100%" height="auto">

 

 

For the font, you can add a media query to the CSS, like this:

@media screen and (max-width: 600px) {
p {
font-size: 16px;
}
}

You can call whichever text element you're using (h1, h2, p, etc). Here's some more information about media queries from W3C: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Reply
0 Upvotes