Hi everyone

In SD4, how can I change the width of a panel/ div to stretch across the screen? Its currently half way across the page but I want it to stretch across the page. In FF all I had to do was set the column number of that div to the same number as the number of columns in the design. Cant find this at all in SD4!

Im using a theme - Trends Blog and have deleted one panel/div where there were 2 previously fillng the width of the page. So now I need that one remaining panel to take up the width. I hope Im explaing that ok?

Is it perhaps because this theme isnt using the column width layout seen in FF and maybe using css grid or something else?

Confused!

Thanks in advance for any help!

Normally you give a container the width 100%, but in that theme you have structures with and without CSS grid, so we need to know which container you want to make wider in order to help.

Hi Inger, thanks very much for your reply.

The container is named as container-12

Here is the css, I cant see anything here that relates to the width:

.container.container-12 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-align: center;
margin: 8px 16px;
padding: 16px;
border-radius: 8px;
background-color: rgba(75, 33, 166, .75);
background-image: url('./images/Earth-Digger.jpg?id=47&cache=1585776169621');
background-attachment: scroll;
background-position: center center;
background-clip: border-box;
background-origin: padding-box;
background-size: cover;
background-repeat: repeat;

grid-area: cont-3;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
background-blend-mode: multiply;
}

@media screen and (min-width: 40rem) {
.container.container-12 {
margin-right: 8px;
margin-bottom: 16px;
margin-left: 16px;
}
}

@media screen and (min-width: 64rem) {
.container.container-12 {
margin-bottom: 16px;
}
}


It is fine on mobiles as it is full width, larger screen sizes though it is half page width

Thanks for your help!

b

That container is inside a grid, so you won't be finding the width on the 'container-12' itself. You need to edit the grid at both breakpoints. But you said you had deleted some containers, is one of them by any chance 'container-13? Completely deleted, or just moved?
I will see if I can get the attention of someone who is a bit better with grids than myself, he will most likely be able to explain this better than me. Just hang on there...

Yes I 'think' it was container13 that i deleted, but not 100% sure as its not there now to select! It was the container next to it on tablet and desktop size.

Ive got a little closer to understanding this, if I select the "Container.css-grid-2" at the bottom toolbar, i can then open the grid edtor. In there is looks like the container that I want to extend to full width is called "cont-3" not "container-13" as it is in the css. It shows as being 50% with "cont-4" showing next to it in the row, taking up the other 50%. So it would seem the logical thing would be to select and delete "cont-4" but the delete button, shown as a minus sign, is greyed out/ not available.

Any ideas gratefully received!

Yes, you are on the right track. Try to edit the grid to look like the attached. Pay attention to what is said in the toolbar to the right.

Thank you, I think its fixed
Just to check that i did it correctly, I:

1 Found where the layout had two colums instead of just one which I wanted.
2 Instead of deleteing the extra colums (cont-4) I selected it and edited the name to cont-3, so now that single container stretched right across the page.
3 Click ok to apply and exit the grid editor

Seems to look and work ok. Can you confirm that this was the correct thing to do?
Thanks again for your help.

And I loved the pop up help message "Just create rectangles dude and everythig will be ok"? classic Coffeecup!

One thing that I dont understand. The overall container layout, which i havent changed from the original theme, has either one panel with 100% width, or two colums of 50% each. But, in the grid editor it shows that there are 3 colums! ONe is 50% and the other 2 are 25% each.

The layout doesnt reflect that though. What am i missing? I guess that the css grid is somehow "underneath" the layout of the containers, is that so? but why wouldnt it match the layout of the containers - 50-50 or 100%

Slowly getting there!

To your first question, if what you did was the right thing to do: It can be solved in different ways. I think I would, for the sake of easyness, have deleted both cont-3 and four, and then created some new rows right across and named them cont-3. But if your way is working at all widths, then it is probably ok.

What I just think may be the reason for this 50+25+25 would be, that the same grid system may have been used somewhere else, maybe in another template, where column 2 and 3 might have had different contents.

This is also a learning curve for me, in that I haven't actually used grid very much, and the guy I was trying to get over here seems to have been off-line today. But that is also 'classic CoffeeCup'; You learn best if you have to try explaining it to someone else.

Following Barry's posts I played around with the Trends Blog theme, and I started asking myself the following.

1. The theme seemed to be using CSS Grid in Fallback rather than in Display Grid. While this clearly works, doesn't this perhaps prevent creating a Fallback for browsers which don't support CSS Grid?

2. If my suspicion at item 1 above is correct, what advantages are there in not creating all CSS Grid items under Display Grid?

3. Does Barry's question perhaps suggest that the primary value of themes involving fairly complex CSS Grid items is
(a) demonstrating how CSS Grid can be used, and
(b) direct use for websites only where one doesn't wish to change the structure, but just replace words, pictures etc.?

Frank