Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 12, 2017 at 4:01 am #875642
    Overhaulics

    I have a site that has 3 columns, the outside two are set to be stuck at 300px wide due to having advertisements in them that do not scale by width.

    The columns have assigned the columns unique CSS classes.
    left-advertising-column
    middle-column
    right-advertising-column

    My issue comes when the site starts getting narrow, between desktop width and mobile activation. Between 1200px wide and 768px. The middle column gets too narrow and the content too stretched out/cut off. I have been reading about flexboxes but don’t know if that applies to enfold or not. Would it be possible at a certain width to have either one of the advertising columns be removed so the middle column takes up the remaining space or to have the middle column show first as a full width 1/1 column above the advertising columns?

    November 12, 2017 at 8:35 am #875659
    Jordan Shannon

    Hey Kyle,

    Add the following to quick css:

    @media only screen and (max-width: 1200px) and (min-width: 768px)  {
.right-advertising-column{
display:none!important;
}
}

    Best regards,
    Jordan Shannon

    November 12, 2017 at 8:59 am #875672
    Overhaulics

    Ok, so what this does is close. I swapped right for left. It ends up making the right ad column take up the new space while I want the middle column to take up space gained.

    You can see what happens on the site now. ‘

    I thought I had some CSS in place to prevent the ad column from getting wider but it may not be working.

    .left-advertising-column, .right-advertising-column {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    }

    November 12, 2017 at 6:12 pm #875775
    Mike

    Hi,
    We need to help the middle column brake it’s restrains, try using this instead:

    @media only screen and (max-width: 1200px) and (min-width: 768px)  {
.left-advertising-column{display:none!important;}
.middle-column {width: 80% !important;}
}

    Best regards,
    Mike

    November 12, 2017 at 10:27 pm #875854
    Overhaulics

    Amazing, this will work perfectly for now!

    November 13, 2017 at 11:43 am #876039
    Rikard

    Hi,

    Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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