Re: Craft 2.0: Adjusting button sizing (or text size) in mobile view for multicolumn section

Solved

Craft 2.0: Adjusting button sizing (or text size) in mobile view for multicolumn section

TomMc
Excursionist
29 3 5

Hey guys,

 

In mobile view for our Craft 2.0 themed website, the text in the buttons are cut off, likely because of the amount of text that we fit into the field, "Buy at our Spoonflower Store." Specifically, this is for the multicolumn section (button) at the top, and multicolumn section (button) at the bottom of the page. The wording isn't up for negotiation.

 

Here is the button in desktop view (totally fine):

 

Screen Shot 2023-05-09 at 8.30.27 AM.png

 Here is the button in mobile view with text cut off at the top:

Screen Shot 2023-05-09 at 8.30.45 AM.png

Has anyone solved this problem?

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
10087 2006 2056

This is an accepted solution.

To solve it, you can add this CSS code at the bottom of your base.css file. 

@media screen and (max-width: 749px){
.multicolumn .button {
font-size: 20px !important;
}
}

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
10087 2006 2056

Could you share your store URL to check? 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

TomMc
Excursionist
29 3 5

Hey Dan, 

 

I messaged you. The buttons are in the multicolumn sections at the top and bottom of the page. 

 

Something interesting to note for others coming across this thread. Changing the top button from a rich text section buttont to a multicolumn section button removed the cut off text problem in mobile view in Craft 2.0. 

 

Tom

Dan-From-Ryviu
Shopify Partner
10087 2006 2056

This is an accepted solution.

To solve it, you can add this CSS code at the bottom of your base.css file. 

@media screen and (max-width: 749px){
.multicolumn .button {
font-size: 20px !important;
}
}

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

TomMc
Excursionist
29 3 5

Thanks, Dan.