Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 14, 2019 at 12:35 pm #1078670
    restube

    Hey all,

    if just been trying to optimize my page for mobile displays.

    I use a color section with 1/2 images and 1/2 text elements on desktop and tablet.
    On mobile I hide the 1/2 image element and use a 1/1 image element instead.

    In the 1. block it worked perfectly on mobile – Image and Textblock display without padding below each other.
    However, in the 2. block I used the same settings but I can`t see the image. Instead I see the Background Color of the textblock.

    1-block

    2-block

    Why is that? And how can I achieve the same results as in the first block?

    Cheers
    Restube

    March 18, 2019 at 4:20 pm #1079943
    Nikko

    Hey restube,

    Thanks for giving us a link to your site.
    I have checked it and noticed it is hidden on mobile view.
    Screenshot in private content.

    Best regards,
    Nikko

    March 19, 2019 at 4:05 pm #1080372
    restube

    Hey Nikko,

    I see what you mean.
    Did you check the backend of the website?
    it looks like this:
    story-mobile

    Let me explain how I set it up and hopefully we will figure out where I went wrong:
    – 1/1 Element is set to be always visible. The image inside is set to only show on mobile
    – Left 1/2 element only uses a Background image. Hence, on mobile (when the sections go on top of each other) the image is not showing any more. Thats why I created the 1/1 element above and disabled the left 1/2 element on mobile.
    – Right 1/2 is the text block and works fine.

    In the end I want to create exactly the same look as in the very first screenshot from my initial post.

    You know what I mean? And maybe have an idea what i need to do?

    Cheers

    March 21, 2019 at 9:50 am #1081285
    Nikko

    Hi restube,

    Thanks for giving us more context to this.
    Here are some things you can do:
    – remove 1/1 column element (this is not needed)
    – the left 1/2 column should not be hidden on mobile, just add an image element inside it then use same image as the background image, hide this on desktop and tablet then show on mobile.
    Let us know if this helps.

    Best regards,
    Nikko

    March 25, 2019 at 10:24 pm #1082860
    restube

    Hey Nikko,

    thanks for your help! This is already better than before.
    Works perfect on desktop and tablet

    However, on mobile there is a gap between the image and the blue content block.
    Is there a way to eliminate that gap?

    See yourself:
    123456

    The white space marked by the red arrow needs to go :)

    Cheers!

    March 25, 2019 at 11:18 pm #1082875
    Nikko

    Hi restube,

    Try adding this css code in Quick CSS, located in Enfold > General Styling:

    @media only screen and (max-width:767px) {
  .av-equal-height-column-flextable .flex_column.av_one_half.first {
    margin-bottom: 0 !important;
  }
}

    Best regards,
    Nikko

    March 28, 2019 at 10:49 am #1084028
    restube

    Thanks Nikko,

    just what i was looking for!

    Cheers
    Restube

    March 28, 2019 at 12:27 pm #1084066
    Nikko

    Hi restube,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Mobil color section image display issue – Background color instead of image’ is closed to new replies.