Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Images and Text in separate Divs with mobile/tablet compatibility

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #279924
    kamie.richardson
    Participant

    I am trying to have a two-column setup with the tour images on the left and text on the right. But everything is under one div in the main, so it’s a single column in reality. There are no adjustments made for different screen sizes in the media queries so the single column with floated images is actually behaving correctly. I have a further complication in the desktop with the nav being floated to the right, making a third column.

    I think a short-term solution would be to put my images and text in separate divs (two for each tour, six total) and (using classes) adjust the widths of the divs in the media queries. I’ll also have to include space for my nav. The problem is, I’m looking through my text book and examples and I’m not coming up with a way to do this. Can I get some help coding this properly?

    Pen: https://codepen.io/anon/pen/zMVWpd#anon-login

    Thank you in advance!

    #279935
    Beverleyh
    Participant

    Put the real content aside for a moment and try coding up a basic structural demo using coloured blocks.

    If you show us what you’ve tried (you’ve mentioned media queries and wrapper divs…. do this) we can offer suggestions based on that.

    The problem is, I’m looking through my text book and examples and I’m not coming up with a way to do this

    Do what exactly? Get the basic structure into place? Try floats or flexbox. Use percentages so that widths adjust fluidly.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.