The layout I created in Pinegrow is displaying incorrectly in the browser preview. On the layout in Pinegrow, the columns are fitting perfectly side by side in a 12 grid format (left column is 5 with 1 offset, right column is 6). But when I preview it, the 2nd column is being pushed down below, even at a large browser size. Please see attachments (your system will only allow one image to be attached for “new users” - in the other image I show how it is all lined up perfectly in Pinegrow). I need this to be working properly for a project due Monday - please advise!
It will only be helpful if we can check the code or live project.
For a quicker way can you write code of that block, from the start of the container?
<div class="container-fluid pb-5 pt-5 shadow-none">
<div class="align-items-center row">
<path data-name="Path 5629" d="M479.273 278.222h-93.85a3.93 3.93 0 010-7.86h93.85a3.93 3.93 0 010 7.86z" fill="#fff" opacity=".3"/>
<div class="col-lg-5 offset-lg-1 pb-3 pt-3">
<h1 class="display-4 fw-bold mb-3"><b class="fw-bolder"><p class="bg-transparent display-4 fw-bolder lh-sm mb-n3 mt-0 text-primary">Your built-in </h1>
<h1 class="display-4 fw-bold mb-3"><p></p></h1>
<h1 class="fw-bolder h1 lh-sm mb-2">eqipment finance program </h1>
<p class="fs-5 lead lh-base mb-5 mt-4">Whether you sell equipment through ecommerce, quotes or brick-and-mortar stores, APPROVE embeds your company's very own custom-branded finance experience into all your points of sale.</p>
<a class="btn btn-primary me-2 ms-0 pe-4 ps-4 rounded-pill text-white" href="#">Start Now</a>
<a class="btn btn-outline-dark pe-4 ps-4 rounded-pill" href="#">Watch Video<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-play-circle ms-1 start-50" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg></a>
</div>
<div class="col-12 col-lg-6 col-md-6 col-sm-12 col-xl-6 col-xxl-6 pb-3 pt-3">
<h1 class="display-4 fw-bold mb-3"><b class="fw-bolder"><img src="email%207%20header%20manufacturing.jpg" class="image-fit image-fit-right-center img-fluid"></h1>
<h1 class="display-4 fw-bold mb-3"><p></p></h1>
</div>
</div>
</div>
</section>There is the code of that section. I’m not sure how to give you access to the live project but I would be happy to do that!
Hi @elizad21,
Hmmm, it seems like your HTML that you pasted is slightly malformed. Are you sure you copied it all?
There are some empty paragraph tags and paragraphs inside of h1 tags.
Looking at your two columns. I’m not sure why they are wrapped in a path. The first column is set to be 5 columns with 1 offset column on lg and bigger screens. On screens smaller than lg it will be 12 columns. The second column has a LOT of size classes, but the important one is col-md-6. This means that it will be 6 columns on medium, but 12 on smaller screens. So, if your screen is md your first column will be 12 while your second will be 6. So, you should either change this to col-lg-6 or change the breakpoint on your first column. While this is causing part of the problem, I think the malformed HTML - mostly the path in front of the first col causing the problem.
Cheers,
Bob
Hi Bob,
Thanks for your reply. I didn’t actually write any of the code; I’ve just been building and designing in Pinegrow visually. This is the code that Pinegrow created. I don’t know why a path was created. I took one of Pinegrow’s blocks and just put in my content. I will try pasting the code again below.
I’ve worked with the concept of Bootstrap columns before so I understand how the math should be broken down. My question is, why is the page not accurately reflecting the columns I put in?
I’m a bit confused by the way you worded the column feedback. Could you please tell me the following:
Column 1: What settings should I have?
Column 2: What settings should I have?
I will then check against what I have. Hopefully we can come to a resolution.
Thank you,
Eliza
<section class="bg-white pb-3 pt-4 text-dark">
<div class="container-fluid pb-5 pt-5 shadow-none">
<div class="align-items-center row">
<path data-name="Path 5629" d="M479.273 278.222h-93.85a3.93 3.93 0 010-7.86h93.85a3.93 3.93 0 010 7.86z" fill="#fff" opacity=".3"/>
<div class="col-12 col-lg-5 col-md-12 col-sm-12 col-xl-5 col-xxl-5 offset-lg-1 offset-xl-1 offset-xxl-1 pb-3 pt-3">
<p class="bg-transparent display-4 fw-bolder lh-sm mb-n1 mt-0 text-primary">Your built-in
<h1 class="fw-bolder h1 lh-sm mb-2">eqipment finance program </h1>
<p class="fs-5 lead lh-base mb-5 mt-4">Whether you sell equipment through ecommerce, quotes or brick-and-mortar stores, APPROVE embeds your company's very own custom-branded finance experience into all your points of sale.</p>
<h1 class="display-4 fw-bold mb-3"><b class="fw-bolder"></h1>
<h1 class="display-4 fw-bold mb-3"><p></p></h1>
<a class="btn btn-primary me-2 ms-0 pe-4 ps-4 rounded-pill text-white" href="#">Start Now</a>
<a class="btn btn-outline-dark pe-4 ps-4 rounded-pill" href="#">Watch Video<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-play-circle ms-1 start-50" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg></a>
</div>
<div class="col-12 col-lg-6 col-md-12 col-sm-12 col-xl-6 col-xxl-6 pb-3 pt-3">
<h1 class="display-4 fw-bold mb-3"><b class="fw-bolder"><img src="email%207%20header%20manufacturing.jpg" class="image-fit image-fit-right-center img-fluid"></h1>
<h1 class="display-4 fw-bold mb-3"><p></p></h1>
</div>
</div>
</div>
</section>
<div class="container my-5">
Hi @elizad21,
Can you put the project as a compressed file onto a file sharing site like WeTransfer? When you say it is Pinegrow’s code, how did you add it to the page or get it?
With respect to the column sizes. Remember the Bootstrap sizes designate breakpoints where the new property will be applied. So, col-lg-6 means a screen size of lg and greater. Adding col-xl-6 is not needed. Also, the framework assumes a full size of 12, so anything smaller than lg would be 12 without additional classes.
I’d like to take a look at the project and find out where the code is coming from. As to your two questions, what are you trying to achieve? Two columns on md and larger, or lg and larger.
Cheers,
Bob
Here is the project in a Dropbox folder: Dropbox - New Website Home.zip - Simplify your life
I haven’t finished it; I’ve just been working on the top sections, which is when I ran into this column display problem. I’m now trying to make sure that this program is worth my time; if it is buggy and full of issues, I will have to move on to another program.
I will answer your questions as follows:
When you say it is Pinegrow’s code, how did you add it to the page or get it?
- I started with one of Pinegrow’s page templates. I’ve added in Pinegrow’s provided blocks, columns, etc. Then I’ve added my content in. I haven’t written any code myself. That is how the code got onto the page.
With respect to the column sizes. Remember the Bootstrap sizes designate breakpoints where the new property will be applied. So, col-lg-6 means a screen size of lg and greater. Adding col-xl-6 is not needed. Also, the framework assumes a full size of 12, so anything smaller than lg would be 12 without additional classes.
- I was just trying to cover all of the breakpoints to see if that was what was causing the display problem; I understand the logic. Now that the photo is being pushed to the second row, even if I adjust the column size to 5, it stays on the second row. It’s not following the rules as it should. In fact, I brought in a new 2 column block, and dragged all of the content into the new columns. It does the same exact thing. On Pinegrow it all displays correctly; in the browser, the image is pushed to the second row. There is clearly a glitch happening.
I’d like to take a look at the project and find out where the code is coming from. As to your two questions, what are you trying to achieve? Two columns on md and larger, or lg and larger.
- I want two columns on at least lg and larger (perhaps md and larger; I haven’t gone through and customized the whole tablet design yet), exactly as I have designed it in Pinegrow. I literally just want my content on two columns side by side (as it shows in the Pinegrow builder), not stacked where the picture is pushed to the next row (as it shows in the browser preview)! Should be a very simple concept to achieve, especially since it displays correctly in Pinegrow, just not in the browser.
Thanks for the project. Just a little more clarification so I can re-create your problem.
Which template?
When you added in Pinegrow provided blocks and columns,… do you mean from the Library panel List tab items, or from the Blocks or Components tab? In the image above, the Library panel is located on the left with the List tab selected.
The item I am really interested in is where the path came from that is the first item of your row.
Thanks,
Bob
Thank you Rob. I added them from the “Blocks” section.
And it was the “Agency” template under the template library for Bootstrap 5
I guess after you opened it you deleted a lot?
Yes, I deleted out what I didn’t need, and added my content into the template
So, it looks to me like your deletion left behind some unwanted code. Namely, that path element. Do you remember which blocks you used for the top? The code is somewhat malformed. Lots of h1tags with p tags inside.
I don’t remember which specific blocks I used for the top. I guess I just need to rebuild the section from scratch.
Did I do something wrong to earn the “Read Guidelines” badge? I don’t understand what I did. All I said was that I guess I will have to rebuild the section.
@elizad21 I don’t believe you did anything wrong, I assume you read the guidelines? If so then congratulations on receiving your first badge - these are good things 
Hi @elizad21,
Yeah, what @Rob said. They are supposed to gameify and make the forum fun. Here is a link that sort-of explains it. Sometimes it can be a pain because you can’t upload as many pictures, etc… until you earn a certain badge. I guess it cuts down on spam.
Let me know if you need some help redoing that top section.
Bob