Mobile Responsiveness with Columns

Design help General
1

I’ve started a new website, super happy with how it’s looking on PC however my main issue is the responsiveness of the columns on mobile.

Ideally I’d like to have 4 services per row, would be happy to go with 2 if 4 will be pushing it for size, but I can’t get them positioned in the way that I would like.

I’ve played around with the column settings and the container’s layout display but I feel like I’m missing something simple.

Here is my site Read-Only

2

Hey Joseph, (@JosephGMedia),

Have you thought about using Flexbox or Grid to achieve the layout you want?

Greater control over layout and responsive by default vs use of columns.

If you need some direction just let me know.
Keiran

5

Thanks for your reply Keiran, I’ve tried with the Flexbox but it seems to mess with my thumbnails scaling - I also gave Grid a go earlier on which wasn’t responding when I was changing the parameters but I’m not sure if that was due to the layouting on my White Box class.

I’ve worked it out since with the columns (Not sure if I need to share another Read-Only or not to reflect changes), my issue now is that the span of the Header text is going beyond the columns.

I’ve tried putting them in a flexbox div and centre justifying it and wrapping the child elements but that doesn’t seem to help.

If you could provide direction on that, that would be awesome!

6

Hey Joesph,

Glad you were able to get it sorted.

Regarding your Heading span overflowing your columns, that’s happening because of font size in a small container.

Options:

  1. (not ideal) Alter the text size smaller to fit in the text, but then have inconsistent sizing on your headings, or have all really small headings to fit the smaller viewport, which will look even smaller on the larger (mobile portrait) viewport
  2. (OK, but still not great) Make use of a ‘vw’ for font size and ‘1.5-’ for line-height, this will still give a small heading but will grow for the larger mobile portrait screens (Make sure all heading have the same class)
  3. Go to a single column layout to give you enough room to fit the desired text heading within the ‘white box’ element - that means going with Flexbox or grid.

Here’s an image with the font sizing using vw settings:

1
1234×639 9.31 KB

Keiran

7

Thanks for your trouble Keiran, after being persistant I did go ahead with Grid and it is definitely a lot better. Do you know if there’s a way to add borders to an area the same way as I do have for my White Box class?

8

I’ve also now opened up the problem of the grid exceeding the span of the page in mobile layout. :frowning:

9

Hey Joseph,

was having a little bit of a play around, to see how grid could work

10

Hey Keiran, Thanks for that. This is exactly what I’m trying to achieve. Could you advise me on what’s wrong with my current settings to try and do that?

The client is after 4x4 on web/tablet and 2x2 on mobile. How are you getting it to be responsive? I’m using a grid and also tried changing the display to flex but it’s just blowing my thumbnails up.

11

I’ve tried placing things into a div and then into the grid, the responsiveness is still not working…

12

Hey Joseph,

I’ll do a video going through the steps.

Will post soon

Keiran

13

Hey @JosephGMedia,

Videos below:
(Audio gets out of sync part way through - should be able to follow along tho)

1 Like
14

Wow Keiran, thank you so much for the high level of detail, this helped a lot and will definitely help with future projects when working on responsiveness. I do have one last question though - the portrait mode in mobile still gets cut off on a two column layout, would you know why that is? I tried changing my container to Flex and aligning it into the centre but that doesn’t seem to be helping.

Thanks again for your help thus far!

15

Hey Joseph,

Glad that helped.

Regarding the Mobile Portrait overflow issue, this is happening because the ‘H3 - Service Card Heading’ element text pixel size (and letter spacing) is wider than the parent container.

You will need to adjust the font size and letter spacing to ‘make’ it fit.

See image below (click on it to see all the settings) as example:

1
1233×1200 17.3 KB

16

Wow that did the trick.

Thanks so much again for your help and patience!

1 Like
17

That impressive! Thank you for sharing!

1 Like