Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 4, 2016 at 10:49 pm #559550
    BrendaSarg

    Hi there…ok, I’ve found to check the mobile behavior so my home page grid images stay the same (don’t push to one under another) and that worked great for the IPad issue I was having.

    However…it now looks terrible on phones? 1 image goes on the right and 3 on the left?

    http://sofiebdesign.com/

    So I’m wondering if the reason the grid page looks terrible on mobile is because I inserted images….so I tried to do them as backgrounds in the grid to test. For some reason, it looks like this?: http://sofiebdesign.staging.wpengine.com/ (hosted on WPengine) so that’s not a solution either :(

    Can you help please? I’ve launched the site but am embarrassed at how it renders on mobile.

    January 5, 2016 at 2:14 am #559662
    Elliott

    Hey BrendaSarg!

    Can you take a screenshot and highlight what your trying to do so we can get a better idea? If your trying to keep that layout even on small screens it’s going to look very small and scrunched up.

    Best regards,
    Elliott

    January 5, 2016 at 2:39 am #559680
    BrendaSarg

    http://snag.gy/BHhSx.jpg

    I totally get that it makes more sense to stack them…and that is my preference…but when I look at it on mobile, it’s not spaced correctly and doesn’t reach to the sides like the first image.

    January 6, 2016 at 5:07 am #560316
    Elliott

    Hey!

    Add this to a codeblock element in that page.

    <style type = "text/css">
@media screen and (max-width: 450px) {
.responsive #top #wrap_all .av-flex-cells .no_margin.flex_column_div, .responsive #top #wrap_all .av-flex-cells .no_margin.flex_column_table_cell {
    padding: 0px !important;
}
.responsive #top #wrap_all .av-flex-cells .no_margin.flex_column_table_cell img {
    margin-right: 0px !important;
}
}
</style>

    Best regards,
    Elliott

    • This reply was modified 8 years, 10 months ago by Elliott.
    January 6, 2016 at 5:35 am #560325
    BrendaSarg

    That worked for getting them all the same size (width), but I’m just missing the white space between these 3 now?

    http://snag.gy/JJbcq.jpg

    January 6, 2016 at 6:29 am #560334
    BrendaSarg

    Just noticed this too? Can you explain what’s happening here…these 2 images are the exact same size when inserted…only one is coming up a little short?

    gah…snag.gy isn’t working.

    The bottom 2 images on the right….the one is shorter than the other??

    January 7, 2016 at 4:28 am #560974
    Elliott

    Hi!

    Looks like it’s because of the padding on the second column.

    Best regards,
    Elliott

    • This reply was modified 8 years, 10 months ago by Elliott.
    January 8, 2016 at 6:23 pm #562145
    BrendaSarg

    That didn’t really help me at all.

    January 11, 2016 at 3:55 pm #563235
    Andy

    Hey!

    you need to control image’s height (and maybe even width). Try this code:

    .avia_image {
height: 315px;
width: 315px;
}

    Have a look at this if you need it: kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Regards,
    Andy

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