Solved SP Page Builder

main body 100%

Asked by Puntje 5 years ago Last activity 5 years ago

Hi can i give the blog pages and recipe pages another .ccs
but the blog menu is then different. It only for the main body. I also like this in on other website of my

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

I want 100% in the main-body on the blog - pages - but not on menu pages

@media (min-width: 576px) {
.container {
max-width:100%
}
}

@media (min-width: 768px) {
.container {
max-width:100%
}
}

@media (min-width: 992px) {
.container {
max-width:100%
}
}

@media (min-width: 1200px) {
.container {
max-width:100%
}}

    .container {
width: 100%;
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left:auto

}

Accepted answer

Marked as the solution

Mehtaz Afsana Borsha Staff

5 years ago

HI, Could you please give me a screenshot of this issue?

15 more replies

Puntje Asked this

5 years ago

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

Mehtaz Afsana Borsha Staff

5 years ago

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

Puntje Asked this

5 years ago

https://prntscr.com/wdmbbw

I do not want the padding on left and right

Mehtaz Afsana Borsha Staff

5 years ago

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

Pavel

5 years ago · edited

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.

Puntje Asked this

5 years ago · edited

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

Pavel

5 years ago · edited

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

Puntje Asked this

5 years ago

I will try

Puntje Asked this

5 years ago

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.

Pavel

5 years ago · edited

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.

Pavel

5 years ago

And this code for mobile and tablet potrait 100% width

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

Puntje Asked this

5 years ago · edited

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.

Puntje Asked this

5 years ago

Hi is there a. custom code for above

Pavel

5 years ago · edited

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.

Puntje Asked this

5 years ago

i will try. thank you!