I can’t expand a banner from left to right

  • chandra9000

    (@chandra9000)


    5 months, 1 week ago

    Hello, this is my first message, I’m a newbie with WordPress and maybe this is easy, but I’m going crazy with this question.

    Up there is a image as a banner (later it will be a logo, when the design is finished). I want to expand it from left to right, so it resize when the window size is bigger or smaller, but it doesn’t work.

    Outside WP, with pure HTML and CSS, it would be as simple as this:

    <head>...<head>
    <body>
       <img style="max-width: 100%; object-fit: fill" src="prueba.jpg">
    </body>

    (It seems that WP rename my image as “prueba-1.jpg”, I don’t know why).

    Here you can see an example:

    https://rosatintado.com/prueba.html

    But I’ve tried everything I can think of, and it’s imposible for me to get it working in WP 🙁

    Thank you very much!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Jair – WPMU DEV Support

    (@wpmudevsupport15)

    5 months, 1 week ago

    Looking at the code of the site, it seems you are using the Astra Theme, with the default Page Builder (Gutenberg), and you are using some kind of “Image” block. This block usually can’t extend its width over the parent container.

    Check if the Image block has an option to change its Alignment:
    https://wordpress.org/documentation/article/group-block/#change-alignment

    Usually there is an option to change it to “Full-Width”. If that doesn’t work, then try replacing that Image block element with a Feature Image block:
    https://wordpress.org/documentation/article/post-featured-image-block/

    Are you trying to create a header for your site? Perhaps the Header Builder can help you with that:
    https://wpastra.com/docs/create-header-with-header-builder/

    Kind regards,
    Jair.

    adeel1973

    (@adeel1973)

    5 months, 1 week ago

    Hi @chandra9000 

    Welcome to WordPress! Don’t worry,  this is a common issue, and you are already very close to the solution.

    In WordPress, images often don’t stretch full-width because of the theme container or block settings that limit their size. Here’s how you can fix it:

    Option 1- Using the Block Editor (Gutenberg)

    1-Edit the page or post.


    2-Click on your image block.


    3-In the right sidebar, look for the “Width” option-set it to Full width or Wide width.


    3-Update the page and check the result.


    Option 2- With Custom CSS
     If your theme doesn’t allow full width, try adding this CSS:

    img.banner {

      width: 100%;

      height: auto;

      object-fit: fill;

      display: block;

    }

    Then, give your image the class banner.

    Option 3- Check the Container
     Sometimes the image is inside a <div> that has a max-width (like 1200px). You can remove that limit by adding this CSS:

    .site-header img {

      width: 100%;

    }

    Once you do this, your image should expand and resize with the browser window- just like in your HTML example.

    I hope these options will help you 

    Best Regards

    A.Ahmad, Italy

    Chief Developer at 

    https://nettocalcolostipendio.it/ 
    Thread Starter chandra9000

    (@chandra9000)

    5 months, 1 week ago

    Hi Jair, thank you very much for your help.

    Yes, I’m using Gutenber with Astra, but the theme isn’t important, I chose it because it is very famous but I can use any other, because my website it’s very simple: it will have only one page (the homepage) with only two elements:

    1. A picture above from left to right, that automatically expands to fit the window size. This is the difficult part, actually impossible for me.
    2. A simple contact form below the picture, but this is relatively easy, I have already achieved it.

    This is all.

    I’ll read now all the documentation you tell me, but really is so difficult to make in WP a simple code like this? :

    <head>...<head>
    <body>
       <img style="max-width: 100%; object-fit: fill" src="prueba.jpg">
    </body>

    This is the result:

    https://rosatintado.com/prueba.html

    Wouldn’t be possible to write that simple .html file in a text editor (as you can see it has only a few bytes long) and then integrate that external .html file inside my website in WP?

    Thank you very much…

    Nebu John – WPMU DEV Support

    (@wpmudevsupport14)

    5 months, 1 week ago

    Hi @chandra9000,

    I hope this message finds you well.

    Wouldn’t be possible to write that simple .html file in a text editor (as you can see it has only a few bytes long) and then integrate that external .html file inside my website in WP?

    That is certainly possible, but it is not the way WordPress is designed to function. WordPress is built to help you create and manage your pages without the need to write code, using the page builder to make the process more straightforward and efficient.

    I would suggest that you go through the documentation provided for a better understanding. I hope that helps you to further proceed. Please feel free to get back to us if you need any further clarification.

    Best Regards,
    Nebu John

    Thread Starter chandra9000

    (@chandra9000)

    5 months, 1 week ago

    Hi adeel1973, thanks for your help.

    In the right sidebar, look for the “Width” option-set it to Full width or Wide width

    The field “Width” in the right sidebar is a numeric field (with arrows up/down), and it and the “Height” below have the dimensions of the picture: 2560 x 425.

    There is a dropdown list, “Object Fit”, with these values: Default, Fill, Cover, Contain, but none of them produce any effect (the picture stays centered up, fixed on the same size, without expanding), so I put it on “Fill”.

    If your theme doesn’t allow full width, try adding this CSS:
    …
    Then, give your image the class banner.

    I don’t know how to give class names to objects (images, paragraphs, etc -yes outside WP, in pure CSS/HTML with a text editor, but not inside WP), but I add this CSS:

    img {
    border: 5px solid red;
    }

    And it works!!

    But if I write this:

    img {
    width: 100%;
    height: auto;
    object-fit: fill;
    display: block;
    }

    it doesn’t work, the picture stays the same 🙁

    Sometimes the image is inside a (div) that has a max-width (like 1200px)

    This could work, but how do I know wich is the div of my picture?

    I’ve tried the Object Inspector of Chrome, but the source code is an incredible mess. I think this is the div I’m looking for:

    <div class="wp-block-uagb-image uagb-block-6fe4a989 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none"><figure class="wp-block-uagb-image__figure"><img decoding="async" srcset="https://rosatintado.com/wp-content/uploads/2025/10/prueba-2.jpg ,https://rosatintado.com/wp-content/uploads/2025/10/prueba-2.jpg 780w, https://rosatintado.com/wp-content/uploads/2025/10/prueba-2.jpg 360w" sizes="auto, (max-width: 480px) 150px" src="https://rosatintado.com/wp-content/uploads/2025/10/prueba-2.jpg" alt="prueba" class="uag-image-2931" width="2560" height="425" title="prueba" loading="lazy" role="img"></figure></div>

    ¿¿??

    🙁

    A.Ahmad, Italy

    Regards from Málaga, Spain…

    Thread Starter chandra9000

    (@chandra9000)

    5 months, 1 week ago

    Yes it works!!

    Yes it works!!

    Yes it works!!

    Check if the Image block has an option to change its Alignment:
    https://wordpress.org/documentation/article/group-block/#change-alignment
    Usually there is an option to change it to “Full-Width”.

    Yes it has it!!

    Now it works perfectly, on the first try!!

    Yes it works!!

    Thank you very much to everyone who has helped me, a hug from Málaga, Spain 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.