[Resolved] Different size top image on website

Home Forums Support [Resolved] Different size top image on website

Home Forums Support Different size top image on website

Viewing 10 posts - 16 through 25 (of 25 total)
  • Author
    Posts
  • #2020882
    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.

    Best wishes.
    From Balaguer, near of Barcelona

    #2022626
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #2022781
    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

    Best wishes.
    From Balaguer, near of Barcelona

    #2023827
    David
    Staff
    Customer Support

    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);
        }
    }
    #2024496
    rafel jesus

    Hi David.
    I put the code here.

    Captura de pantalla 2021-11-26 a las 16.17.44.png

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

    Thanks

    Best wishes.
    From Balaguer, near of Barcelona

    #2025901
    David
    Staff
    Customer Support

    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.

    #2026015
    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.

    Captura-de-pantalla-2021-11-27-a-las-13.27.31.jpg

    Thanks

    Best wishes.
    From Balaguer, near of Barcelona

    #2027337
    David
    Staff
    Customer Support

    In the CSS you need to replace:

    https://the_full_url_to_the_replacement_mobile_image

    with the URL for your mobile image.

    #2027342
    rafel jesus

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

    Best wishes.
    From Balaguer, near of Barcelona

    #2027433
    David
    Staff
    Customer Support
Viewing 10 posts - 16 through 25 (of 25 total)
  • You must be logged in to reply to this topic.