Two module positions (or items in article) fluid with with boxed design - Forum | JoomShaper
Solved Helix Framework

Two module positions (or items in article) fluid with with boxed design

Asked by Rvdzande 3 years ago Last activity 3 years ago

Using Helix Ultimate and SP Page Builder 4.

I have made a design based on a PDF. I would like to have two items 'extend' outside of the boxed content. A hero image / banner being full width and the footer / bottom items the same).

'Fluid widht' in the template position doesn't fix it
Same when I try to do it inside the item

It seams the 'boxed' layout is blocking this, but I am pretty sure it was possible in the past, just starting to doubt. Will try again tomorrow with custom CSS. Spent 12 hours mainly working at the PC today. Meanwhile I am hoping for some suggestions here.

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
3 years ago · edited

My advice, but you'll do as you please

info_som.jpg

6 more replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
3 years ago · edited

Hoi Rvdzande,

  1. In general SPPB 4, is not supported anymore. Please install SPPB 5.0.7 Pro. It has back-end editor that should be easier to manage layout.
  2. Instead of spending 12h, you could hire a expert for 1h that could finish it ;p
  3. But seriously, In your case you do NOT need template boxed layout, becuase you need visible "shadow box" only for component area. That already has container. On your place I would only add shadow effect (by Custom CSS) to component area #sp-main-body. Why? Bacuse if you have boxed layout component cannot be wider than the boxed area! It's like stacking blocks inside the box (or table top), remember playing Lego?
Rvdzande Asked this
3 years ago
  1. Done this (see my other post). Any good tutorials to see latest functions? Don't see them on the site (think I've had a Youtube video via mail?)
  2. Any experts you recommend? For now I will try :)
  3. Working on it while getting adjusted to new SP Page Builder
Rvdzande Asked this
3 years ago · edited

Ok, but will the update be risky? Will look into this first!

Edit: Seams this has worked, but need to get used to it first, thanks for now!

Paul Frankowski Senior Staff
3 years ago

No risk. Becuase you don't edit any file.

You are welcome.

Rvdzande Asked this
3 years ago

Well not entirely true, my mainpage got fcked up because margins were completly different, had to start over again because I couldn't switch colums, idk what happened. Rest went ok!

Paul Frankowski Senior Staff
3 years ago · edited

If the initial design assumptions were wrong, something always goes awry during a renovation. These are costs to be endured.

No one promised that a developer's job is always as simple as click-click. But you probably already know that ;p

Usefull tip! In SPPB Settings you can define Container Maximum Width.

Rvdzande Asked this
3 years ago · edited

Fixed:

Assigned a class to mainbody (mainbod)

Code: 

mainbod {
    max-width: 100%;
    flex-basis: 100%;
    margin: auto;
    background: #fff;
    -webkit-box-shadow: 0 0 10px rgba(158,156,158,1);
        box-shadow: 0 0 10px rgba(158,156,158,1);
.body-innerwrapper {
 background-image: url("yourbackgroundthing.png");
background-repeat: no-repeat, no-repeat;
background-size: cover;
}
Log in to reply.