How to resize cart notes and center headlines on mobile in Brooklyn theme?

Store Design
, ,
1

Hello!

Could anyone please help me change the “Cart Note” size to be only 2 text lines high, and make its headline centered (this part on a mobile device only)? Brooklyn theme.

Any help would be kindly appreciated!

2

What you store url @StoreHelpNeeded ?

What is your goal? Do you want to restrict the user from typing only 2 lines or user can write more then 2 lines but heath need to not be more than 2 lines height???

3

shopcutify.com, I want the text box to be only 2 lines high so it does not take that much space.

4

And I only want this to be so on the user’s phone. I want the bar to be slimmer and the headline to be centered.

5

Hi @StoreHelpNeeded

  1. You want this height to be reduces only for mobile right?

Anthony_David__0-1691333705883.png
Anthony_David__0-1691333705883.png378×311 7.09 KB

Thanks

6

Correct!

7

And make the text above centered

8

@StoreHelpNeeded

Use the below CSS

@media only screen and (max-width: 768px){
.cart__note textarea {
    height: 70px;
    max-height: 70px !important;
    min-height: 70px !important;
}
.cart__note label {
    text-align: center;
    display: block;
}
}
9

In which file should I put this in?

10

on your theme.liquid search for and right above it add the below code

Thanks

11

Hi @StoreHelpNeeded

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.scss.liquid

@media(max-width:767px){
textarea#CartSpecialInstructions {
    min-height: 70px !important;
}
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly