Main Body 100% - Question | JoomShaper

Main Body 100%

P

Puntje

SP Page Builder 3 weeks 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

}

0
16 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 weeks ago

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

0
P
Puntje
Accepted Answer
3 weeks 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

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 weeks ago

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

0
P
Puntje
Accepted Answer
3 weeks ago

https://prntscr.com/wdmbbw

I do not want the padding on left and right

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 weeks 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

0
Pavel
Pavel
Accepted Answer
3 weeks ago

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.

0
P
Puntje
Accepted Answer
3 weeks ago

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

0
Pavel
Pavel
Accepted Answer
3 weeks ago

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

0
P
Puntje
Accepted Answer
2 weeks ago

I will try

0
P
Puntje
Accepted Answer
2 weeks 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.

0
Pavel
Pavel
Accepted Answer
2 weeks ago

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.

0
Pavel
Pavel
Accepted Answer
2 weeks ago

And this code for mobile and tablet potrait 100% width

@media (max-width: 991px) {
    .sppb-row-container {
        max-width: 100% !important;
    }
}
0
P
Puntje
Accepted Answer
2 weeks ago

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.

0
P
Puntje
Accepted Answer
1 week ago

Hi is there a. custom code for above

0
Pavel
Pavel
Accepted Answer
1 week ago

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.

0
P
Puntje
Accepted Answer
1 week ago

i will try. thank you!

0