Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1069540

    I hope I can explain this properly…

    I have a few pages on a website that contains profiles of people. Each profile is in its own text box. The length of each profile varies depending on how much the person has said about themselves!

    Originally, I organised this as two long half columns, side by side. Each half column contained multiple text blocks for each different profile. All worked well. Except on mobile devices (understandably), it would show as all of the first column followed by all of the second column. That meant the second most important person on the page (the person at the top of the right hand column on desktop view) would end up showing halfway down the page on a mobile device!

    Now I have reorganised the page to use lots of grid rows, which each have two columns to allow for two text boxes side by side. On mobile devices, everything is fine now. The order of people is as it should be. However, on desktops, there is now too much padding in between some of the text boxes – if the person in the left hand column has written loads about themselves, and the right hand column person has been brief, the right hand column will show lots of white space underneath the text box.

    So the display ends up looking something like (making people into numbers)

    1 2
    1
    3 4
    4
    4
    5 6
    7 8
    7
    9 10

    Is there a better way – a better layout element – for me to use to organise these pages? Or is there anything I can do with CSS?

    Thanks in advance. I hope I have explained this okay!

    #1069635

    Hey annaz1,

    Could you please give us a link to your website, we need more context to be able to help you.

    Yes, if we give the same height to all elements, you’ll get the white space as you mentioned.

    Best regards,
    Victoria

    #1070013

    Thank you for your reply. Attached is a link to the page in question. You will need to scroll down to see the issue I mean – for example, above ‘Annabel’ and ‘Matthew’ there are very large bits of white space (extra padding from the cell directly above to account for a ‘taller’ cell to the above left/right).

    #1070056

    Hello Anna,
    I think I might have a similar question: can you please post a public link to your page.
    Thank you
    Dan

    #1070957

    Hi annaz1,

    Best regards,
    Victoria

    #1079207

    Huh, I was sure I responded to this thread weeks ago…

    Anyway, what I (thought I had) said was – Victoria, thank you for pointing out the issue with CSS preventing the page from being responsive. This has now been fixed.

    However, are there any further tips on how best to solve the layout of this page re. the problem I described in my first post?

    Thanks.

    • This reply was modified 1 week ago by  annaz1.
    #1079628

    Hi annaz1,

    I am not seeing it like this anymore.

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.