PaulOB
March 25, 2024, 3:30pm
21
Just remove the justify-content: space-around;
from here:
.buttonContainerC {
display: flex;
flex-wrap: wrap;
/* justify-content: space-around;*/
align-content: space-around;
max-width: 569px;
gap: 10px;
}
That will align the buttons to the left and not center the last row.
I answered that question above and you could use a media query and set the buttons to 50% minus the gaps etc. Alternatively you can probably do it without a media query by doing this:
Remove the flex-basis from this fiddle and use this instead.
.linkButtonB {
flex: 1 0 0;
margin: 0;
cursor: pointer;
min-width: 183px;
}
I think that will automatically go down to 2 columns now (and then one) and stretch to fill.
I didnât want the buttons to stretch.
https://jsfiddle.net/81kd7th5/1/
.linkButtonB {
flex: 1 0 0;
margin: 0;
cursor: pointer;
min-width: 183px;
}
This isnât able to work in the code?
Flex without the invisible div: https://jsfiddle.net/rxjo7can/1/
It is no longer in the middle now.
.buttonContainerC {
display: flex;
flex-wrap: wrap;
/*justify-content: space-around;*/
align-content: space-around;
max-width: 569px;
gap: 10px;
}
PaulOB
March 25, 2024, 4:25pm
24
Yes you did. You said the following which implied you wanted the buttons to fill the space.
If you want the buttons to stay at 183px then you can leave them as befeore and just justify them to the center.
You must do this for both sets beccauswe for no good reason you have again duplicated sections of code that are exactly the same meaning that you have to go to multiple places to make changes. Whereas you could just have this.
.linkButtonB,
.linkButton{
flex-basis:183px;
margin: 0;
cursor: pointer;
}
.buttonContainerC,
.buttonContainerB {
display: flex;
flex-wrap: wrap;
justify-content:center;
align-content: center;
max-width: 569px;
gap: 10px;
}
That will go for 3 down to 2 and stay in the middle and stay aligned with each other.
However there will be an issue (and this is present in all your demos) that if the buttons donât all fit in the viewport then the positioned fixed set will be offset differently as they are in separate scroll containers. I donâ't think thereâs much you can do about that unless you start from scratch with some other method or just hide one set while the other one is shownâŚ
1 Like
Doing that does not address this: https://jsfiddle.net/mubzqshy/
I tried to create a grid version here: https://jsfiddle.net/cqr3wk1f/
I donât understand why it is not working.
It is staying at 3, not changing from 3 to 2 to 1.
What am I doing wrong or forgetting to do here?
@media (max-width: 569px) {
.buttonContainerB {
grid-template-columns: repeat(2, 183px);
}
}
@media (max-width: 183px) {
.buttonContainerB {
grid-template-columns: repeat(1, 183px);
}
}
.buttonContainerB {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;*/
align-items: center;
max-width: 569px;
gap: 10px;
}
@media (max-width: 569px) {
.buttonContainerC {
grid-template-columns: repeat(2, 183px);
}
}
@media (max-width: 183px) {
.buttonContainerC {
grid-template-columns: repeat(1, 183px);
}
}
.buttonContainerC {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;*/
align-items: center;
max-width: 569px;
gap: 10px;
}
Fixed the grid version: https://jsfiddle.net/5aqcr0ue/
.buttonContainerB {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;*/
align-items: center;
max-width: 569px;
gap: 10px;
}
@media (max-width: 569px) {
.buttonContainerB {
grid-template-columns: repeat(2, 183px);
}
}
@media (max-width: 183px) {
.buttonContainerB {
grid-template-columns: repeat(1, 183px);
}
}
.buttonContainerC {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;*/
align-items: center;
max-width: 569px;
gap: 10px;
}
@media (max-width: 536px) {
.buttonContainerC {
grid-template-columns: repeat(2, 183px);
}
}
@media (max-width: 172px) {
.buttonContainerC {
grid-template-columns: repeat(1, 183px);
}
}
Trying to have the grid version behave the same way as the flex version.
How do I remove the bottom scrollbar from the grid version?
Also, I should never see a right scrollbar until it gets down to 2 buttons.
Both images are from the same viewport from the browser.
The grid version I put together on my own, maybe more stuff needs to be done in it?
Flex version: space in the middle removed, no bottom scrollbar:
https://jsfiddle.net/7ur3b4Ly/
.buttonContainerC {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
max-width: 569px;
gap: 10px;
}
.linkButton {
flex-basis: 183px;
/* width of each button */
margin: 0;
/* spacing between buttons */
cursor: pointer;
}
Grid version: https://jsfiddle.net/7ur3b4Ly/2/
.buttonContainerB {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;
align-items: center;*/
max-width: 569px;
gap: 10px;
}
@media (max-width: 569px) {
.buttonContainerB {
grid-template-columns: repeat(2, 183px);
}
}
@media (max-width: 183px) {
.buttonContainerB {
grid-template-columns: repeat(1, 183px);
}
}
.buttonContainerC {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;
align-items: center;*/
max-width: 569px;
gap: 10px;
}
@media (max-width: 536px) {
.buttonContainerC {
grid-template-columns: repeat(2, 183px);
}
}
@media (max-width: 172px) {
.buttonContainerC {
grid-template-columns: repeat(1, 183px);
}
}
PaulOB
March 26, 2024, 9:32am
28
Adjust your media query a little bit larger as you must be missing some gap in your calculations.
I thought the max widths were supposed to match whatâs in the CSS. no?
PaulOB
March 26, 2024, 9:52am
30
The max-width will stop the container getting larger but wonât stop inner content from poking out which will still cause a scrollbar on the viewport.
Iâm on a mobile at the moment so canât check the fiddle as it doesnât work properly on a mobile unlike codepen. It may be that you have padding or margins on a parent container that also makes things wider. Do you have padding/margin on the body or any parent container as that will affect the media query width required.
1 Like
I have this now: https://jsfiddle.net/km2aohyn/1/
Shouldnât both media queries be the same?
593 - 400 = 193
601 - 408 = 193
What should that be saying to me?
Which may explain why the two numbers are different.
.buttonContainerB {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;
align-items: center;*/
max-width: 569px;
gap: 10px;
}
@media (max-width: 593px) {
.buttonContainerB {
grid-template-columns: repeat(2, 183px);
background: blue;
}
}
@media (max-width: 400px) {
.buttonContainerB {
grid-template-columns: repeat(1, 183px);
background: green;
}
}
.buttonContainerC {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;
align-items: center;*/
max-width: 569px;
gap: 10px;
}
@media (max-width: 601px) {
.buttonContainerC {
grid-template-columns: repeat(2, 183px);
background: blue;
}
}
@media (max-width: 408px) {
.buttonContainerC {
grid-template-columns: repeat(1, 183px);
background: green;
}
}
PaulOB
March 26, 2024, 11:25am
32
You have less space between elements when there are 2 across. You also have 16px to account for on the body.
Thereâs probably another 4pc padded mg either side on something else but I canât look it brik Iâm on the desktop
PaulOB
March 26, 2024, 12:55pm
33
The media query for 3 across should be 569px + 8px + 8px = 585px to account for the body padding. Iâm not sure why you had 593px unless you were confusing the actual fiddle scrollbar with your layout.
Placing 585px where the 593px will create a bottom scrollbar:
Is that what you wanted me to do?
With 593px, no bottom scrollbar appears.
You can test it outside jsfiddle, a scrollbar will appear on the bottom if set to 585px.
These numbers are set exact so no scrollbar appears on the bottom.
.buttonContainerB {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;
align-items: center;*/
max-width: 569px;
gap: 10px;
}
@media (max-width: 593px) {
.buttonContainerB {
grid-template-columns: repeat(2, 183px);
background: blue;
}
}
@media (max-width: 400px) {
.buttonContainerB {
grid-template-columns: repeat(1, 183px);
background: green;
}
}
PaulOB
March 26, 2024, 1:25pm
35
No it wonât.
Here you are a codepen with media query at 585px and where no scrollbar appears.
That is a straight copy from your fiddle.
Here is a screenshot at 586px width.
is there something else that you are doing or have I got to click through ten or more screens to get to the problem?
If you change it to 593px, the scrollbar is gone.
Scrollbar:
Scrollbar:
PaulOB
March 26, 2024, 2:27pm
37
Finally I can see what you are doing.
The problem is that you have shortened the height of the viewport and the right scrollbar has clicked in and media queries unfortunately do not cater for the scrollbar width. The media query will always get the width of the viewport without a scrollbar (on my mac browsers scrollbars take up no space and are not visible until you start scrolling and then overlay content rather than reducing the width)âŚ
So if you are worried about small height screens then you need to allow an extra 16px (or so) for vertical scrollbars although that will deffer between browsers and Mac systems as mentioned.
That issue is not with flex version because media queries are not used there.
With the flex version, Post #23 Can that be fixed?
So it is in the middle and doesnât get pushed off to the side?
Visually, the 3 some text buttons should stay as is:
While having the whole block centered in the middle.
https://jsfiddle.net/rxjo7can/1/
PaulOB
March 26, 2024, 2:45pm
39
I believe I have given you the solution to that twice if Iâm not mistaken and we are talking about the same thing?
Just change the space-between to center.
justify-content: center;
Here it is:
.buttonContainerB {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
max-width: 569px;
gap: 10px;
}