Image full width to fit container

Support
#1

Hi, I’m using PRO and Renew stack.
I set up the site as boxed and in theme options “site width” is set to maximum permitted (90%).

In some section of my pages I’d like to have full width images, fit to container, but I can’t because maximum width is always forced to 90%.
Setting row to “inner container OFF” and “marginless ON” doesn’t help.

I like to have the result as screenshot attached. Here I have manually changed the css setting
.x-container.width {
width: 100%;
}
but this is not the solution because all page is affected, I want only specific rows to be full width.

Can you help me?
Thanks in advance!

#2

Hi Luca,

Thank you for writing in, would you mind to clarify why turning off the inner container does not work? turning off the inner container should make your container 100% width, like on your CSS, so it should work.

There is a remove spacing option on the section that will automatically remove all margin, padding, and off the inner container option of the section.



Cheers!

#3

Hi, thank you for your support.
It doesn’t works: I have set up my row as attached (inner container: off ; marginless column: on) and I have used the “remove spacing” tool.

But the result is … not stretching to the container (see here)

In chrome inspector I can see the reason:

Can you help me?

#4

Hi There,

Could you please set the width and max-width of row to 100%?

Also set the width of your image to 100% as well:

Let us know how it goes!

#5

I’m sorry, it doesn’t works.
I think the problem is with the container: it has the css class “.x-container.width” and this is set at 90% .
When I set the image or row width to 100%, it seems to fill the 100% of the container, but not of the site.

Any idea?

#6

Hi There,

I’ve tested on my local installation and couldn’t replicate this issue.

It seems your website is under construction mode.

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link login to your site
  • WordPress Admin username / password

Thanks.

#7

Yes for sure, here your credentials.

The page is this https://www.hce.international/hce-model/ , see the image at the top.

#8

Hi There,

In this case, to make the image fullwidth, you have to change the template of that page to: Blank - No Container | Header, Footer

Let us know how it goes!

#9

I’m sorry, your solution obviously works, but in this way all page become without container, so I have to manually set margin for all content, one by one.
I’ll try something else, thank you anycase for your support.

#10

Hi There,

It will affect to the page you change the template only.

For more information, please take a look at this: https://developer.wordpress.org/themes/template-files-section/page-template-files/.

Regards!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.