Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • September 12, 2015 at 7:34 pm #502154
    DigitalEssence

    Hi,

    I’m using the stretched layout with the .responsive .container set to a width of 1100px as I don’t want my content full width as per:

    @media only screen and (min-width: 1140px) {
.responsive .container {
width: 1100px;
}}

    Within this layout I have a 4 column layout with one image in each column.

    This works great on large screens and iPad landscape but on iPad portrait and smaller the 4 columns align left rather than in the center

    You can see what I mean here: http://physio.digitalessence.net/ with the images of a woman running.

    Have I done something silly?

    Thanks,

    September 13, 2015 at 10:05 am #502251
    Rikard

    Hi DigitalEssence,

    That is the default behaviour, please try the following CSS to fix it:

    @media only screen and (max-width: 990px) {
#whatwedoboxes .av_one_fourth .avia-image-container-inner img {
    display: table !important;
    margin: 0 auto !important;
}
}

    Regards,
    Rikard

    September 14, 2015 at 1:45 pm #502714
    DigitalEssence

    Thanks Rikard, that’s sorted it.

    I’ll add this to my Enfold Git hub.

    Hedley

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘4 columns don't align correctly when screen size is reduced’ is closed to new replies.