[Resolved] Different size top image on website

[rafel jesus]

Hi Elvin

On the desktop version in both languages, the image on all pages are well, in frontpage is bigger than the other ones, that are how I like it, can you see here

I did your recommendations on frontpage image, I only put the CSS but the image isn’t hide on the mobile version.
The code of background-position I left in it top center because I like how the image looks on the desktop version.
But this code top center affects me on the mobile version, because it keeps it, I can not change it.

On the other pages, Who we are, My account and How we can help you in mobile version, now look well.

If you need access to the backend to revise it, tell me how I’ll send you the codes.

[Tom]

Background images and aspect ratios on multiple devices can be difficult.

Typically, I would suggest using a different image on mobile – one with an aspect ratio that suits the width of mobile vs one built for desktop. GenerateBlocks Pro has an Advanced Backgrounds feature that allows you to set different images on different devices.

Without it, you can use CSS to define a different image. Let us know if you want to give that method a try and need help with the CSS 🙂

[rafel jesus]

Hi Tom.
This project is already finished and how much I make the budget I include the plugins that I can use to develop the project and now that it is already finished, therefore now I cannot include another plugin.
So I have to do it via CSS, but I’m not much code if you can help me with the code would be appreciated.
For future projects, I think I will use Genereteblocks

Thank you so much

[David]

Hi there,

to swap the image using CSS try the following:

1. Select the Container Block with the background image. In Advanced > Additional CSS Class(es) – add a custom class eg. hero-container

2. Now add the following CSS with your mobile image URL:

@media(max-width: 768px) {
    .gb-container.hero-container::before {
        background-image: url(https://the_full_url_to_the_replacement_mobile_image);
    }
}

[rafel jesus]

Hi David.
I put the code here.

But the other I put it on design site in CSS additional but it didn’t work.

Thanks

[David]

Where did you add the CSS? I cannot see it on the site.

Can i suggest you disable WP Rocket and SG Optimizer – this will ensure any CSS updates are not affected by their caches.

[rafel jesus]

Hi David.
I disable the plugin that you mention, where you connect I’m working with plugins for the first time.
You can see where.

Thanks

[David]

In the CSS you need to replace:

https://the_full_url_to_the_replacement_mobile_image

with the URL for your mobile image.

[rafel jesus]

Hi Davis.
The media URL, that I gonna upload.
Thanks

[David]

You’re welcome

[Author]

Posts