Elementor Image widget is small on mobile with Generatepress

[Kristan]

Hello I just build a new site. I use the latest version of wordpress 5.5. And latest version of GP plugin and theme. My problem is with elementor image widget not rendering the right image size in mobile and tablet. It’s only around maximum 80px in mobile and tablet whatever I do to adjust. This is weird. When I switch to the default theme twenty, it renders the right image size on mobile, not maximum 80px. But with generatepress all images inserted in elementor are at maximum 80px. I already reinstalled the GP theme and doesn’t change anything.

FOr now, I use the image as a background image, it renders right. But I need the image widget rendering the right size in mobile and tablet.

Here’s a view in mobile
https://ibb.co/z81cZ1f

It renders okay on desktop.

[David]

Hi there,

can you share a link i can access ( ie. remove the coming soon ) with the Image in place so i can see what the problem is.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kristan]

Thanks for your prompt response David. Here’s a link I used image widget there

https://falconiadigital.com/strategic-digital-advertising/

[David]

Weird – it is picking your Mobile header logo image size CSS.
Can you disable your cache so i can take a closer look.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kristan]

Alright david. just turned off my wordpress caching and the plugin.

[David]

The Image in Elementor has no width setting – if you were to change its size it should display correctly. If you don’t want to add a size then you need to change this CSS:

@media (max-width: 950px) {
    .mobile-header-logo img {
        height: 80px !important;
    }
}

to:

@media (max-width: 950px) {
    .mobile-header-logo > img {
        height: 80px !important;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kristan]

all my images in mobile or tablet view in that page is small. I tried the elementor image width and max adjustments but it doesn’t work, normally it works.I tried adjusting the size in elementor but none of them works.

[Kristan]

wwoooo that works!!!!

[Kristan]

Thanks david! Thats my error on my code.

[David]

Its rather odd how that CSS would affect the Elementor images. But i am glad it works 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts