Min width issue:

Community Forums Forums Design Tips and Tricks Min width issue:

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  chrismcintosh 2 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #120985

    jgk
    Participant
    Post count: 27

    Hi,

    I’m not sure how to accomplish this on he following website, due to how nested div’s are handled.

    On the following page we have divs dividing the page down the middle with different background colors and text colors for design purposes. But throughout the site the max width is set to 1140px. Right now on very large screens the text in those divs are going out further than that.

    I need the background to extend the full width but need the text to extend no further than 1140px. I’m not sure how to do this.

    Please help! Thank you!

    http://stewartmartin.studioissa.com/workshops/
    #121405

    chrismcintosh
    Member
    Post count: 12

    As long as I am reading the issue correctly the following might be a good start.

    HTML
    Just inside your <div class="fifty purplebg split"> div

    Add a another div. I did <div class="txt-widget">

    Then do the same for <div class="fifty whitebg split">

    CSS
    .txt-widget {max-width: 570px;}

    Seems like you will have to play around with padding/margins though.

    #121412

    chrismcintosh
    Member
    Post count: 12

    Sorry this is little better.

    CSS

    .txt-widget {
    max-width: 450px;
    margin: 0 auto;
    }
    #121550

    jgk
    Participant
    Post count: 27

    Thank you Chris! That fixed it! Thanks so much.

    I’m having one tiny issue I didn’t mention initially, here’s a screenshot: https://www.evernote.com/shard/s3/sh/0f94fabb-7299-45df-b4b1-6005b201506b/961c91469093c66ad452187c0349cd4b

    Basically at certain browser widths due to the size of the words one of the boxes is becoming larger than the other. This pushes down the enclosing div and makes a white line.

    I know I can set the height of the boxes with media queries but would there be a simpler solution to avoid this?

    Thanks so much!

    #122281

    chrismcintosh
    Member
    Post count: 12

    At first look maybe a max-height declaration on that .txt-widget class. Might be able to take a closer look tomorrow.

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

You must be logged in to reply to this topic.