Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #607715

    Hello!

    I have a set of 1/3 columns and a set of 1/4 columns on one page, all styled as boxes, and they are not spacing/aligning properly on tablet views– on portrait view, the 1/3 columns do not have consistent space between and the 2nd and 3rd are indented, and the 1/4 columns do not have consistent space between and the 2nd and 4th are indented.

    How can I fix this? I have tried a couple of other fixes that did not seem to work. I can’t use equal height for the row or the columns won’t collapse and line up vertically, and it doesn’t look right without setting them for space between.

    Links to the page and screenshots are below.

    Thanks in advance for your help!

    #608023

    Hey Julie,

    Please try the following in Quick CSS under Enfold–>General Styling:

    
    @media only screen and (max-width: 990px) {
    .page-id-21 .av_one_third {
        margin-left: 0% !important;
    }
    }
    
    @media only screen and (max-width: 990px) {
    .page-id-21 .av_one_fourth {
        margin-left: 0% !important;
    }
    }
    

    Thanks,
    Rikard

    #608332

    Hi Rikard,

    Awesome– that did the trick in the narrow (portrait) view! It looks much better! I figured out how to add the bottom margin also, to get space between them, here’s what I used in case anyone else needs it:

    @media only screen and (max-width: 990px) {
    .page-id-21 .av_one_third {
    margin-left: 0% !important; margin-bottom: 20px !important;
    }
    }

    @media only screen and (max-width: 990px) {
    .page-id-21 .av_one_fourth {
    margin-left: 0% !important; margin-bottom: 20px !important;
    }
    }

    The last issue in the portrait view is that for some reason, there is extra space in the 1/4 column section between the box in columns 2 & 3, and 3 & 4– there actually was space separating those 2 only before I added the bottom margin. The way the page is set up, there is whitespace at the bottom of 3 of the 4 columns to even them up since I couldn’t use equal height, and there is also a full-width 60px separator (below all 4 columns), but I don’t know why either of those should create extra space only under 2 of these when they are vertically aligned.

    When you look at it now, you can see there is more space above the last 2 boxes. How can I fix that, do you know?

    The wider (landscape view) still has some issues. I see all of the original columns, but they do not line up– in the 3-column section, the right one is longer, and in the 4-column section, they vary. Is the only way to fix that to make these also full-width? (can’t adjust spacers without messing up the desktop view)

    Adjusting the max width on the code provided doesn’t seem to work– I get 4 narrow columns all squished together with no space between them. How can I get those to stack also?

    Thanks so much for your help!

    #609599

    Hi!

    thanks for sharing your solution with us.

    Please use screenshots to make things clear for us, as it’s quite difficult to imagine what you are talking about. Use a service like imgur.com or dropbox.

    Regards,
    Andy

    #609616

    HI Andy,

    I have added a screenshot showing how there is more space between 1/4 columns 2 & 3 (the same thing happens between columns 3 & 4).
    Screenshots of the 1/3 and 1/4 columns not aligning in wide view were already provided above– I have linked to them again below.

    Thanks!

    #610927

    Hi!

    I’m sorry but I can’t see the issue in the screenshots properly. Could you please provide a direct screenshot from the browser?

    Regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.