Turning linkButton into a modal button

[PaulOB]

@asasass

Flex without the invisible div.

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.

@asasass

Can that space be removed when it goes from 3 to 2?

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.

[asasass]

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;
}

[asasass]

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]

@asasass

I didn’t want the buttons to stretch.

Yes you did. You said the following which implied you wanted the buttons to fill the space.

@asasass

Can that space be removed when it goes from 3 to 2?

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…

[asasass]

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;
}

[asasass]

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);
  }
}

[asasass]

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]

@asasass

Also, I should never see a right scrollbar until it gets down to 2 buttons.

Adjust your media query a little bit larger as you must be missing some gap in your calculations.

[asasass]

I thought the max widths were supposed to match what’s in the CSS. no?

[PaulOB]

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.

[asasass]

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]

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]

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.

[asasass]

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]

@asasass

Placing 585px where the 593px will create a bottom scrollbar:

No it won’t.

@asasass

You can test it outside jsfiddle, a scrollbar will appear on the bottom if set to 585px.

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?

[asasass]

If you change it to 593px, the scrollbar is gone.

Scrollbar:

Scrollbar:

[PaulOB]

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.

[asasass]

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]

@asasass

While having the whole block centered in the middle.

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;
}

[asasass]

Then this occurs: https://jsfiddle.net/q2j6rkmy/1/

Not this: