Grid of buttons on mobile

Site URL: https://www.peoplemover.blog

Hello and thanks, in advance, for any help you can provide.

I'm putting together a site (currently protected with password 'gotcha') with multiple very similar pages, each with a large logo for one vlogger at the top-center and a horizontal row of customized buttons leading to the youtube, instagram, etc, just below the logo. For the first such page, there are only two buttons. For viewing on mobile, I was able to get the buttons resized and use the following bit of code to get them side by side:

@media screen and (max-width:640px) {
div#page-section-60388985ada53d690ced0e9e .span-12>.row:nth-child(2) .span-6 {
    width: 50% !important;
    float: left !important;
}
}

Now, pages for other vlogs may have four or more social media buttons, and I'd really like them to appear in column of two (as much as possible) on mobile. How would I go about getting, essentially, two or three rows, each two buttons wide?

If I apply the same code to the page with four buttons, the result is still a vertical stack of buttons just with the last two buttons shifted to the left. 

(I've looked all over and seen answers to similar questions, but none have worked. Either the answer didn't fit or I'm missing some key element.)

~ErikvdO

5 minutes ago, ErikvdO said:

Site URL: https://www.peoplemover.blog

Hello and thanks, in advance, for any help you can provide.

I'm putting together a site (currently protected with password 'gotcha') with multiple very similar pages, each with a large logo for one vlogger at the top-center and a horizontal row of customized buttons leading to the youtube, instagram, etc, just below the logo. For the first such page, there are only two buttons. For viewing on mobile, I was able to get the buttons resized and use the following bit of code to get them side by side:

@media screen and (max-width:640px) {
div#page-section-60388985ada53d690ced0e9e .span-12>.row:nth-child(2) .span-6 {
    width: 50% !important;
    float: left !important;
}
}

Now, pages for other vlogs may have four or more social media buttons, and I'd really like them to appear in column of two (as much as possible) on mobile. How would I go about getting, essentially, two or three rows, each two buttons wide?

If I apply the same code to the page with four buttons, the result is still a vertical stack of buttons just with the last two buttons shifted to the left. 

(I've looked all over and seen answers to similar questions, but none have worked. Either the answer didn't fit or I'm missing some key element.)

~ErikvdO

what is your site password

Let's look at the Baked page as a starting point.

The first thing I can see is that you've got nested columns which makes applying any effect difficult.

Ideally what you want is something like this.

The following is example code.

Now with a NOT nested column situation you can do something like the following to get the two-up effect using grid.

@media screen and ( max-width : 640px ) {

  #page-section-6045ac1101dcd3572acf90aa > .sqs-row > .sqs-col-8 > .sqs-row {
  
    display : grid;
    grid-template-columns : 1fr 1fr;
    
    }
    
  #page-section-6045ac1101dcd3572acf90aa > .sqs-row > .sqs-col-8 > .sqs-row:before {
  
    all : unset;
    
    }
  }

Which looks something like the following on mobile.

I noticed that you have a lot of repeated code. It is possible to reduce the repetition by using multiple selectors for a ruleset. Something like the following.

/* youtube buttons */

#block-yui_3_17_2_1_1615178751411_6637 .sqs-block-button-element--large,
#block-yui_3_17_2_1_1615179418389_5832 .sqs-block-button-element--large,
#block-yui_3_17_2_1_1615179418389_6326 .sqs-block-button-element--large,
#block-yui_3_17_2_1_1615179418389_6817 .sqs-block-button-element--large

  {
  
    background : rgba( 255, 255, 255, .5 );
    background-image : url( 'https://static1.squarespace.com/static/6032fb3c67c0d20c6f23640f/t/603a02208691930fd3c9c64c/1614414368429/Youtube_square_icon.png' ) !important;
    background-position : center;
    background-repeat : no-repeat !important;
    background-size : 100px;
    border : 5px solid rgba( 251, 184, 79, .5 );
    border-radius : 35px;
    height : 100px;
    padding : 20px;
    width : 100px;
    
    }

This isn't the most, less repetitive, version of this CSS but it shows the basic principle of using multiple selectors for a ruleset.

Does that help? If not, let us know and we may be able to delve deeper into this CSS issue.

Cool! Thanks for all the info.

When you say 'a not nested column situation' would putting the buttons in a separate section, away from the larger, central logo (and the spacers around it) simplify things? (If so, it would probably also help with the other set of just three buttons below the main buttons.) Also if so, is there a way to use CSS to fix the height of a section so that I can keep the buttons relatively close to the larger logo?  

Your second suggestion just made my day, too! I was also wondering if there was a way to simplify the code and/or have something like a reusable function I could call and feed parameter values instead of re-writing the same over and over again. What's you've given me will pretty much save me the same amount of effort without having to figure out some JS/HTML/CSS to do that.

Today, I'll see about putting this all to good use and reply back if I get hung up on anything.

Thanks again!  

Quote

'a not nested column situation' would putting the buttons in a separate section

The nesting situation can occur anywhere so a new section won't necessarily help. You have to be very careful when laying things out. When constructing a row always be dropping the blocks next to or between each other. If you drop below or above and then later try to fix it. You can be left with this unwanted nesting.

Once things have gone wrong with the layout I suggest getting each block on a row by itself before attempting to rebuild. I even use line blocks sometimes to make sure I've got them separated. The line blocks, to work, need to be the full width of the page.

Here we can see me beginning to rebuild a messed up layout.

Quote

is there a way to use CSS to fix the height of a section so that I can keep the buttons relatively close to the larger logo?  

Before going to CSS I suggest using the custom height for a section.

Ah, I see what you meant, now. Yeah, I've run into a few frustrating situations with blocks not aligned properly with others, often because I thought I had a button aligned with just another button, when it was actually aligned with a section. I'll check out what I have and make sure everything is lined up right.

As far as the section height, I'm aware of the option to set it via the UI controls, but it seems like I can't get a section short enough to hold just a row of buttons and not have them sit farther down than I like. I'll check it again and see if I can make it work that way.

Thanks again.

Quote

As far as the section height, I'm aware of the option to set it via the UI controls, but it seems like I can't get a section short enough to hold just a row of buttons and not have them sit farther down than I like. I'll check it again and see if I can make it work that way.

Here we can see a section set to custom height 10. Three actually.  I highlighted a section in the middle with red.

I've seen sometimes padding between sections can be more than desired so if the 10 doesn't do the trick hit us up.

Alright... I went through each page and meticulously ensured that everything is bumping up against only what it should where it should. (I found a couple odd spacers that were hidden among the buttons on one page and causing trouble. Has anyone ever suggested an option to make all block borders plainly visible for when they are being laid out?  Like a 'show block borders' toggle?)

That being done, I tried the suggested code for the FreshBaked page, but I'm still getting a single column of buttons down the middle of the page. From the results you got, it looked like a grid of the full-sized buttons and not the reduced-sized ones I'd added a media query for. So, I tried your suggestion with and without the media-query size adjustments. I got the same results, either way. Do you happen a link to a guide that explains all of the row and columns? I don't fully grok all of the '> .sqs-row > .sqs-col-8 > .sqs-row...' business (and trust me, I've been looking for the info.)

On the other hand, I did do the housecleaning to implement the code simplification you demonstrated. It's going to save me from having to scan through a lot of pages of code, copying and pasting a lot, etc. Thanks.

Quote

I tried the suggested code for the FreshBaked page, but I'm still getting a single column of buttons down the middle of the page.

Right. The code was just an example that the effect you want could be achieved.

The following is more specific to your baked page.

@media screen and ( max-width : 640px ) {

  #page-section-6038795720fcbf5ecae634b5 > .sqs-row > .sqs-col-12 > .sqs-row:nth-child( 2 ) {
  
    display : grid;
    grid-template-columns : 1fr 1fr;
    
    }
    
  #page-section-6038795720fcbf5ecae634b5 > .sqs-row > .sqs-col-12 > .sqs-row:before {
  
    all : unset;
    
    }
  }

This is for v7.1 and specific to the poster's needs.

Let us know how it goes.

Sorry for not responding sooner. The solution you provided worked great. Based on the info you provided, I've learned more about how pages are laid out with columns and rows. Thanks for the help.