Display images issue on mobile phone devices

[Symbiosis]

Hi there,

I have many logos displaying on the website which display correctly on the computer screen but they have some issues when they display on mobile phone devices. I tested all on Galaxy S9 and Iphones. I set the row into 4 or 5 columns and used images elements. I adjusted mainly margin either top or/and left to align them on the laptop screen.

1.) Overlapping images -

2.) No gaps between images

I appreciate your support to fix this issue.

Thank you.

[jade]

Hello Symbiosis,

Thanks for writing in.

@Symbiosis

1.) Overlapping images -

This is caused by the negative margin you have set to the second image element. It works well on desktop but negative margins might cause layout or alignment issues on mobile so please be careful in using them.

To solve this, instead of setting the negative top margin in the image settings, try adding this code to the Element CSS of the second image that you want to push up on Desktop view:

@media (min-width: 768px) {
    $el {
        margin-top: -35px !important;
    }
}

Element CSS | Themeco Docs

To read more about negative margins, please check here:

The Definitive Guide to Using Negative Margins — Smashing Magazine

@Symbiosis

2.) No gaps between images

Try adding this to the Element CSS of the SOIL image:

@media (max-width: 767px) {
    $el {
        margin-top: 15px !important;
    }
}

Hope this helps.

[Symbiosis]

Hi Jade,

Thanks for getting back to my issues quickly.

The first overlapping image issue worked well. However, with the No gaps between images issue. It works well on mobile phone but on the screen it pushed back the image down as if the margin-top was zero.
Here is the screenshot.
I need the OCP logo back up 45 px that display well on computer and mobile phones. I added the following CSS to the image OCP .
@media (max-width: 767px) {
$el {
margin-top: 15px !important;
}
}

I also tried with another image, WET Tropics by adding the CSS instead of using negative margin but it didn’t change. I don’t understand though. In general, we need to create new class to a specific element to adjust CSS for that element. However, I am not sure whether I had to add class for these images or not.

Thank you.

[rad]

Hi @Symbiosis,

That CSS will only affect the specific element on mobile, it shouldn’t affect other elements and even on desktop view (since 767px is mobile only).

And it doesn’t need a class name since $el automatically apply the unique class. Unless, you’re targetting the image within it then it will be

@media (max-width: 767px) {
    $el img {
        margin-top: 15px !important;
    }
}

I checked that logo and it’s already pushed down without that CSS. For that, you should negative margin and only specific to that element. Just modify that CSS with negative margin and add it to that specific Element’s CSS

Thanks!