This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Full Width Row stretching content to edges

9 years ago · Last reply by Andrew Misplon 9 years ago

I am using a very basic theme I created from an HTML/CSS site. Using bootstrap as main framework. I changed the container for full width from to .main to .container and I get the following:

if I have 2 columns: background color or image stretches full width but content also expands to full width of viewport (not respecting fixed content width)

I am currently applying the container class to the row in order to apply bootstrap’s fixed width class to hold the content within width. But I can’t apply color or an image to background and make it spread full width

This is the url with a full-width row issue: http://jobdashboard.net/vivaink/about/ (first row with blue logo on the left and text on the right)

Any suggestions?

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

12
  1. Andrew Misplon Staff 9 years, 6 months ago

    Hi Gustavo

    Thanks for posting your question, sorry we weren’t able to reply sooner. Have you made any progress?

  2. Gustavo Cohen 9 years, 6 months ago

    Hi Andrew!

    Were you able to check the link I posted?

    I am starting a new wordpress project right now and I will try a basic WP installation and no other plugin other than the pagebuilder.

    For some reason I can’t make the background spread to full width (maintaining the content fixed to the max width). I had to set a class of “container” from bootstrap to keep content from going to the sides.

  3. Andrew Misplon Staff 9 years, 6 months ago

    I did, thanks. The full-width row functionality works using JavaScript and negative margins. Besides the setting available at SettingsPage Builder to set the Full-Width Container, there isn’t really much else I can offer on this front. When you mentioned: I changed the container for full width from to .main to .container are you referring to the Page Builder setting?

  4. Gustavo Cohen 9 years, 6 months ago

    yes. pagebuilder setting. those are the classes I changed that are setup in the CSS as a fixed width of 1170px

  5. Andrew Misplon Staff 9 years, 6 months ago

    Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

    [email protected]

    Just navigate to UsersAdd New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the Send Password field so we receive the details.

    Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

  6. WordPress Private 9 years, 6 months ago

    This is a private message.

  7. Gustavo Cohen 9 years, 6 months ago

    Credentials sent

    Private Snippet

  8. Andrew Misplon Staff 9 years, 6 months ago

    I remember seeing this problem before with Bootstrap. The way Page Builder handles negative margins for some reason doesn’t work within the construct of Bootstrap’s grid. The width’s in the .container class are the issue.

    I wish I had a workaround for you but unfortunately, can’t see an easy one at the moment. From the support team side of things, we have a very limited time budget to spend troubleshooting technical, more niche challenges like this. All I can do is log this bug for our devs to check out when they can. There are, unfortunately, higher priority issues in the queue already so it isn’t likely something like this would get looked at in the short term. Sorry for the bad news, but thought you’d rather know the real situation.

    Thanks for taking the time to explain the challenge. Wish I could resolve it for you right away.

  9. Gustavo Cohen 9 years, 6 months ago

    Don’t worry be happy!

    Do you recommend a grid framework like bootstrap that I can use that wouldn’t conflict with pagebuilder?

    keep up the awsome work!

    Gus

  10. Andrew Misplon Staff 9 years, 6 months ago

    Thanks for your understanding and support, we really appreciate it.

    Do you need a grid framework if you’re using Page Builder for the site’s content? I’m a bit biased because I use _s already (http://underscores.me/). If you were prepared to leave the grid framework behind, _s would be the way to go. We use it for all of our themes here at SiteOrigin. We also add Bourbon for a little Sass support (http://bourbon.io/). But, if you use all of the assets that Bootstrap provides, I don’t have a suggestion for that replacement.

  11. Gustavo Cohen 9 years, 6 months ago

    (last question) Let me rephrase my question…

    I use your pagebuilder to allow clients to manipulate the content area of their site. I wanted to use a grid framework in order to code everything else (footer, header, widgets, etc…) I can live without all the extras bootstrap offers. Any css grid or light framework you know it works smoothly with the builder?

    Thanks.

  12. Andrew Misplon Staff 9 years, 6 months ago

    Not that I’ve worked with. There are certainly lots to choose from, I just haven’t tested them with PB yet. You could also try rolling out your own lightweight system using the CSS Tricks plan here: https://css-tricks.com/dont-overthink-it-grids/

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread