hi Mehtaz

I cannot place an screenshot

https://www.hetkookboekje.nl/blog-het-kookboekje/thuis-witte-champignons-kweken

the mainbody much be 100% width. So no padding. 100% width

Hi, Did you try the fluid row option? https://prnt.sc/wdh3cl

https://prntscr.com/wdmbbw

I do not want the padding on left and right

HI Ok but did you try this fluid row options? fluid row option? https://prnt.sc/wdh3cl If you enable it then there will be no padding left and right

Hi. No need custom code.

Step 1: Set fluid width in Template Settings for Main Body section. Step 2: Use a fluid section width in SP Page Builder as shown by Mehtaz above.

It is al right for the blog pages.

But then is https://prnt.sc/weoe0x this not aligned. And has no padding.

https://prntscr.com/wev0ws

Only on mobile and tablet size must it be fluid. The computer and larger tablet must not have an fluid width

It is al right for the blog pages

Create a separate template style with these settings for blog pages. For all other pages, use your old template style.

Or css that only affects blog pages.

.com-content.view-article #sp-main-body .container {
    max-width: 100%;
    padding: 0;
}

But keep in mind, this code works well for blog pages created with SP Page Builder. If you want to use the standard Joomla editor to create articles, then for such pages this code will break them. There is no one size fits all solution. Perhaps you need some sandboxed code for blog pages made through SP PB, but not affecting the standard joomla blog pages. Then take a look at this. https://archive.joomshaper.com/forums/joomla-article-integration-full-width

I will try

Hi pavel

i want the mobile and tablet potrait 100% width with fluid and the computer without fluid and 100% width. Is there an css code for.

without fluid and 100% width

Hi. These are mutually exclusive things. Perhaps you are not explaining exactly. Do you want view like this on computer,?

This css code does it.

And this code for mobile and tablet potrait 100% width

@media (max-width: 991px) {
    .sppb-row-container {
        max-width: 100% !important;
    }
}

Hi

the computer must not be fluid, so more like picture below https://prntscr.com/wjzx8r

mobile and protret must be fluid like picture below https://prntscr.com/wjzxqd

That is what i mean. Hope there is a code for only fluid code for only mobile and tablet portret. I put it in the addon of content of sp builder but that does not work. I tried three

@media (min-width:801px) {
main content { background: #fff9f7; margin:0px 10% 0px 10%; }}

@media (min-width:801px) {
.sppb-row-container body { background: #fff9f7; margin:0px 10% 0px 10%; }}

@media (min-width:801px) {
body { background: #fff9f7; margin:0px 10% 0px 10%; }} - this work entire page, but i only want the content

above codes does not work in only the body - custom css of the entire page. So not everything has an left and right margin, that why i put in addon ccs, because not the hole layout must have this padding on the desktop

I just want one code - so i do not have to change that much.

https://prntscr.com/wkwkyj so i want it to be. i changed in sp builder with margin. must do it in every row. And if i have css then i do not have to do that.

Hi is there a. custom code for above

Hi. Let's try one more time :).

the computer must not be fluid, so more like picture below https://prntscr.com/wjzx8r

This already works for you as you want

mobile and protret must be fluid like picture below https://prntscr.com/wjzxqd

The code for this

@media (max-width: 991px) {
    .sppb-row-container {
        max-width: 100% !important;
    }
}

This code needs to be inserted into the custom.css file, not into the addon.

i will try. thank you!