Jump to content

Side by side buttons on mobile one a specific page

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.gerafoundation.com

Hi, I'd like to align two buttons side by side in the mobile view of my website. Ive seen my question asked several times before on here where a CSS code is the recommended solution. I'd like to apply this affect to specific pages on my website and not the entire website. I cant figure out which part of the CSS code targets the specific page. Can someone help me with this? I'd like to have the "prev" and "next" buttons side by side, however they currently become above and below only in the mobile version, example https://www.gerafoundation.com/james

Screenshot 2021-09-20 at 13.35.11.png

Link to comment

Add to Design > Custom CSS

/* James page mobile buttons side by side */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1632108358222_2371+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 hours ago, tuanphan said:
/* James page mobile buttons side by side */

The code worked a charm. Could you explain the logic in the code? Ive tried replicating your solution for another page: https://www.gerafoundation.com/ross in where I edited the following line

 

6 hours ago, tuanphan said:
yui_3_17_2_1_1632108358222_2371

changing it to:

yui_3_17_2_1_1632106842580_2916

But no good.

Link to comment
  • Solution

It is text block id above buttons. Both pages have different structure.

/* Ross mobile page buttons side by side */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1632106842580_2916~div {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
div#block-yui_3_17_2_1_1632109353161_2748 {
    padding-top: 0 !important;
}
}

If you need to add 2 buttons on multiple pages, we can conver it to Code Block, then you just copy-paste, no need to edit any code. What do you think?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/24/2021 at 11:37 AM, tuanphan said:

If you need to add 2 buttons on multiple pages, we can conver it to Code Block, then you just copy-paste, no need to edit any code. What do you think?

I need to add it to three pages, and only those three:

https://www.gerafoundation.com/gordon

https://www.gerafoundation.com/james

https://www.gerafoundation.com/ross

What would you suggest is best? Id like to understand the basics of CCS / Code Block to do it myself so that I dont have to keep bothering you :] I really appreciate your help and the time you've given to respond

Link to comment
On 9/25/2021 at 2:28 PM, RossBurns said:

I need to add it to three pages, and only those three:

https://www.gerafoundation.com/gordon

https://www.gerafoundation.com/james

https://www.gerafoundation.com/ross

What would you suggest is best? Id like to understand the basics of CCS / Code Block to do it myself so that I dont have to keep bothering you :] I really appreciate your help and the time you've given to respond

Add to Design > Custom CSS

@media screen and (max-width:767px) {
/* Gordon */
div#page-section-61480413649ec94660fd29c3 .span-6 {
    width: 50% !important;
    float: left !important;
}
/* James - ross */
/* It looks like you solved */
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.