HI, I want to resize the CTA button on a single product page to fit the container. I used this CSS code to do so: == .single_add_to_cart_button.button.alt { height: 47.35px; width: 552px; font-size: 25px; text-align: center; } == and it works fine on desktop screen. I added this CSS code to make a button responsive & adaptative. == @media only screen and (max-width: 480px){ .single_add_to_cart_button.button.alt{ max-width:600px !important; width:100% !important; } .single_add_to_cart_button.button.alt a{ display:block !important; font-size:18px !important; } } == The issues are: 1. the button fit the container in small screen BUT it doesn't in tablet screen 2. the font size stay the same as on a big button 25px, it doesn't fit the button size. How to fix this please in order to: -> keep the reagent button on all screens and make it fit the size of the container? -> make the button text size responsive to fit the button size? Thank you.
If by tablet you mean something like an ipad mini (and other similar tablet sizes), then you need to use another @media. Something like: @media(max-width:768px){} Use em and % instead of px to make your containers and font sizes more fluid.
Qwikad.com is right. You should try using % for layouts you need to be responsive. I will advise you use bootstrap. it makes all these much much easier
Qwikad.com is right. You should use % for responsive layouts. I would also suggest that you use Bootstrap. It would make your work much much easier.
So many telltales that the entire codebase is just WRONG. Pixel measurements intead of the dynamic EM. Fixed widths intead of semi-fluid (use max-width instead of width), !important indicating specificity hell, daisy-chained classes likely meaning a slew of "classes for nothing" in the markup... Then there's the general flaw of what you're saying; the idea that you can even say "tablet" or "small screen" as if they are meaningful distinctions. THEY ARE NOT. Your breakpoints should be based on the needs of the content, NOT some pre-determined pixel size or specific devices. There's so many indicators that something is really REALLY wrong with your codebase and your question is lacking essential data to create an answer, it makes me think you've got deeper rooted issues than just making one button responsive. But without the markup, surrounding markup, etc, etc, anything any of us tries to tell you is a wild guess. CSS without the markup it is applied to -- much less the surrounding elements that could effect its flow -- means nothing.
Normally, you want it to fit the width of some container naturally, without specifying absolute sizes, so then you can do something along the lines of the following: .single_add_to_cart_button { display: block; text-align: center; width: 100%; /* Adjust the following values, it's just * going to be trial and error: */ padding: 0.25rem 0.35rem; font-size: calc(1rem + 1vw); } (media queries should really just be an escape hatch when you can’t get it to resize naturally, may be necessary here depending on where the button sits in different layouts)