How can I adjust the dynamic size of cart note input for different devices?

Technical Q&A
1

Hey everyone :victory_hand:

just a short an likely easy question. I´d like to maximize the cart note title and input field depending on the used device.

screenshot_293.png
screenshot_293.png1412×387 26.4 KB

On PCs this field should fill most of the free space between itself and the buttons as shown above. Smaller displays and mobile view needs to change automatically for sure.

I tried the width: xxx% parameter at the component-cart.css of my Dawn theme but then the field just becomes bigger and crashes smaller displays. But I think this is the right area for changes, so does someone know, what piece of code I could use?

My shop is at https://myreal-nft.com

2

Hi @Hablo .

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
	.cart__note {
		width: 100% !important;
		margin-right: 4rem;
	}
}

Hope it helps!