Goal -- Update the Store Header Compact widget for my customized design.

Problem -- Widget Board layout seems inconsistent with CSS / Responsive details.

Recreate
1.) Login to admin and proceed to Dashboard > Website > Design > Widget > Boards > Store Header Compact
2.) Proceed to "Layout" options to add a new row into layout.
3.) Click the "+" button to add new column and add Store Logo Zone into column.
4.) Save and view on dev site.

I don't understand why my new "Logo" row is 100% screen width and the pre-existing "Store Menu" appears to respect the CSS width of the container. In the editor, it seems to give us the impression that these are 'nested' in the same container, but they apparently are not.

Screenshots show layout inside the zone and then the result of the page rendered.

ac_Store_Header_img1.jpg (152kb) downloaded 6 time(s).
ac_Store_Header_img2.jpg (30kb) downloaded 5 time(s).


It seems like if we make any edits/customizations to the Boards (layouts, templates, pages, etc.) then the only option is to assign unique CSS ID's to the content and dive into CSS to manage all layout/style. But that seems like a lot more work than the CMS was intended to do -- which makes me suspect that I'm missing something.

Recommendations?

Hello Ray --
Well, not quite. I want to REALLY change the header -- not just update the logo.

I'll try to be more clear.
* I have an 8-4 top row, with two columns. When it renders in the HTML, there's a container DIV tag that makes the top row respect a default desktop container size. This is desired.
* Then, I added another row that's a 12 column row. When IT renders in the HTML, there's NO container tag and it necessarily expands to 100% screen width and the logo is perched all the way on the left.
* Underneath the added row (and in the same container as the 12-col row above) is another 12-col row that was originally present. This contains (by default) the store menu and is similar to the row at the top in that it respects the container size.

In the attached screenshot of the layout, I've indicated the yellow columns that respect the (1127px width?) container designation and the RED column which is expanding to 100% width.
ac_Store_Header_img3.jpg (92kb) downloaded 2 time(s).


The #1 question: How do I get the added 12-column row to respect the container designation that the other rows are using and NOT default to 100% screen width?

Maybe you will figure it out now that you have discovered the code view option, but your screenshot from your first post is different from your second post.

Your first post shows an 8 & 4 bootstrap column arrangement, and your last post shows a 12 bootstrap column arrangement.

On your first post, it is not 100% screen width, it is 100% width of the 8 column in that particular bootstrap grid, all you have to do is add a picture to the right-hand side of the 4 column div and you will see what I mean, the left side will shrink because there is now something occupying the right 4 column div.

Unless your entire logo, is going to occupy the entire 12 column div row, anything that you put on the left-hand side will have to be within their own div, which means you're going to have to reduce the 12 column to something smaller, or it will be a nightmare trying to align properties, especially when screen size changes.

Either way, I would love to see the finished product.

Best of luck,
-Ray

Update: Perhaps shrink was the wrong word to use, if you take the div on the right-hand side, the four column one, and apply a different background color, you will understand my perspective. Technically, there is no shrinking, not sure though if this is true when using a flex grid. Will need to try this out later when I get home.

Edited by user Monday, February 21, 2022 1:22:33 PM(UTC)  | Reason: Not specified