Jump to content

Side-by-Side Buttons in Mobile

Recommended Posts

  • Replies 10
  • Views 3.1k
  • Created
  • Last Reply
2 hours ago, batstheman said:

Site URL: http://www.batsevamakes.com

How does one make buttons be side by side in Mobile view?

I want them to be inline with each other so that they can act as "previous project" and "next project" buttons. 

Hi there

Please show us which pages contain the buttons to edit

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Please try this if it help, paste the code in Advances->Custom code injection->Footer

<style>
@media screen and (max-width: 640px) {
	.blog-row-btn .sqs-col-6 {	    
	    width: 50% !important;
	    display: inline-block !important;
	}
	.blog-row-btn .sqs-col-6:first-child .button-block {
		padding-left: 0;
    	margin-right: 17px;
	}    
}	
</style>
<script>
(function() {
	function contains(selector, text) {
	  var elements = document.querySelectorAll(selector);
	  return Array.prototype.filter.call(elements, function(element){
	    return RegExp(text).test(element.textContent);
	  });
	}

	var prevBtn = contains('.sqs-block-button-element', '←previous')[0];

	if (prevBtn) {
		var row = prevBtn.closest('.sqs-row');		
		row.className = row.className.concat(" blog-row-btn");
	}

})();

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || 
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}
</script>

image.png.c1b8f2ec2d9a5cee89cfd24af19fb9d5.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
19 hours ago, batstheman said:

Darn it.. I'm on the personal plan. I can't do Code Injections. Thanks anyway ❤️

You can add Code Block into the page, it's can be found in page editor

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 minute ago, batstheman said:

Unfortunately, it says this. 😅

Screen Shot 2020-06-25 at 10.05.07 AM.png

LOL, I tried

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
On 6/23/2020 at 10:29 PM, bangank36 said:

Hi there

Please show us which pages contain the buttons to edit

Bangank36, I'm trying to do this with my page as well.

www.artistsandbeyond.com

See how the two buttons aren't side by side on mobile? Can you tell me the specific parts of the code you have in here that isolates those specific buttons? Or is it a side-wide code?

 

Thanks for the help!!!! 

Link to comment
On 8/21/2020 at 2:20 PM, Tyce said:

Bangank36, I'm trying to do this with my page as well.

www.artistsandbeyond.com

See how the two buttons aren't side by side on mobile? Can you tell me the specific parts of the code you have in here that isolates those specific buttons? Or is it a side-wide code?

 

Thanks for the help!!!! 

So far it specify button by the text, so if you want to make it on specific element, may need to provide the id 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.