Button does not adapt size and position to different screens.

Technical Q&A
1

Hello,

I would like to get some help, my current theme doesn’t allow me to add buttons where I need, so I’m trying to write code for each one.
However, I can’t get the “SHOP NOW” button to take position or adapt its size when using different devices to consult the website.

MOBILE VERSION

Screen Shot 2022-01-24 at 09.50.43.png
Screen Shot 2022-01-24 at 09.50.43.png754×660 152 KB

DESKTOP VERSION

Screen Shot 2022-01-24 at 09.51.01.png
Screen Shot 2022-01-24 at 09.51.01.png2500×1224 274 KB

FULL SCREEN VERSION

Screen Shot 2022-01-24 at 09.52.37.png
Screen Shot 2022-01-24 at 09.52.37.png1884×1148 213 KB

Here is the code

}
.hero .mega-subtitle, .hero .mega-title {
  margin: 0;
  text-align: left;


} .hero__btn { margin-bottom: -27%; margin-top: 20%; margin-right: 8%; margin-left: 15%; padding: 10px 40px; width: fit-content; border: 0px; position: relative; border-radius: 45px; font-size: 16px; cursor: pointer; transform: translateZ(4px); transition: auto; float: right; display: inline-block; }

Kindly,

Fabio.

2

Use media queries , quick generation tool : https://simplecss.eu/

Example:

@media only screen 
   and (min-width : 320px) {
   /* Styles here */
.hero__btn { margin-bottom: -27%; margin-top: 20%; margin-right: 8%; margin-left: 15%; padding: 10px 40px; width: fit-content; border: 0px; position: relative; border-radius: 45px; font-size: 16px; cursor: pointer; transform: translateZ(4px); transition: auto; float: right; display: inline-block; }
}
3

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

4

Hello,

Thank you so much for taking the time to help me! Here is the info. The idea would be to look good on both mobile and desktop.

https://sobetfoods.com/

Password: protein

Would you also mind giving me a short answer as to why this is happening and how to fix it? I want to be able to do this in the future. Thanks.