Need help making a button responsive using css

[Mosaab]

Hello
i had a Shopify theme that didn’t allow me to freely position a button on my slideshow so i went and tried to edit it myself , i thought i succeeded but when i browsed through mobile things looked ugly
the buttons on this team look all the same
here is the html for the button withing the slider liquid file

 <a href="{{ block.settings.shop_btn_url }} " class="sbtn"{% if settings.enable_lang_switcher %}data-trans-key="sections.featured_product.shop_now"{%endif%}> 
                      {{ 'sections.featured_product.shop_now' | t }}  
                    </a>  

and here is the CSS code i added

.sbtn {
  background-color: black;
  color: white ;
  border: 4px solid white;
  height:70px; 
  width:300px; 
  font-size: 3rem;
  margin-top: 190%;
  margin-left:100px;
  display: flex;
  align-items: center;
  justify-content: center; 
}

here is the results on both pc and mobile . not allowed to upload two . on pc looks great

i need help to style the button on mobiles

[Pepster64]

Instead of px you might want to use em or rem

like

width: 18.750em; 
height: 4.375em;

or you could do the following:

width: 100%;
max-width: 300px;
height: 70px;

[Mosaab]

@Pepster64

width: 18.750em; height: 4.375em;

Thank you for replying
acctually this didn’t help and i think the problem is in the margin i used to position the button near the edge of the slider is now pushing the button way past the edge on mobiles
here is the full slider liquid because i think the container may be affecting the button position

<!-- Home slider -->

{% if section.settings.enabled %}
<section class="p-0">
  {% if section.settings.slideshow_width == 'standard-width' %}
  <div class="container">
    {% endif %}
    <div class="{% if section.settings.enabled_fullpage %} fullpage full-slider {% else %}slide-1 {% endif %}  home-slider" {% unless section.settings.enabled_fullpage %} data-slick='{"autoplay": {{ section.settings.use_autoplay }}, "autoplaySpeed": {{ section.settings.slider_speed }}000, "infinite": {{section.settings.use_loop}}, "arrows": {{section.settings.use_arrows}},"dots": {{section.settings.use_dots}} }' {% endunless%}>
      {% for block in section.blocks %}
      {% capture blockId %}{{ block.id }}{% endcapture %}
       
      <div>
        <div class="home lazyload {% if settings.enable_blur_lazy_load %} blur-up {% endif %} {{ block.settings.alignment }} {{ block.settings.position }}" data-bgset="{% include 'bg-set', image: block.settings.slider %}" data-sizes="auto" data-parent-fit="cover" style="height: {{ section.settings.slider_height }}vh">
          <div class="container">
            <div class="row">
              <div class="col">
                <div class="slider-contain">
                  <div>
                    {% if block.settings.slide_subtitle != blank %}
                    <h4 style="color: {{ block.settings.slide_subtitle_color }}" {% if settings.enable_lang_switcher %}class="lang_trans" data-trans="#slide_{{blockId}}_slide_subtitle"{% endif %}>
                      {{ block.settings.slide_subtitle }}
                    </h4>
                    {% if settings.enable_lang_switcher %}
                    <span class="hide" id="slide_{{blockId}}_slide_subtitle">{{ block.settings.trans_slide_subtitle | raw }}</span>
                    {% endif %}
                    {% endif %}
                    {% if block.settings.slide_title != blank %}
                    <h1 style="color: {{ block.settings.slide_title_color }}" {% if settings.enable_lang_switcher %}class="lang_trans" data-trans="#slide_{{blockId}}_slide_title"{% endif %}>
                      {{ block.settings.slide_title }}
                    </h1>
                    {% if settings.enable_lang_switcher %}
                    <span class="hide" id="slide_{{blockId}}_slide_title">{{ block.settings.trans_slide_title | raw }}</span>
                    {% endif %}
                    {% endif %}
                    {% if block.settings.slide_text != blank %}
                    <h3 style="color: {{ block.settings.slide_text_color }}" {% if settings.enable_lang_switcher %}class="lang_trans" data-trans="#slide_{{blockId}}_slide_text"{% endif %}>
                      {{ block.settings.slide_text }}
                    </h3>
                    {% if settings.enable_lang_switcher %}
                    <span class="hide" id="slide_{{blockId}}_slide_text">{{ block.settings.trans_slide_text | raw }}</span>
                    {% endif %}
                    {% endif %}
                    {% if block.settings.shop_btn_url != blank %}
                   <a href="{{ block.settings.shop_btn_url }} " class="sbtn"{% if settings.enable_lang_switcher %}data-trans-key="sections.featured_product.shop_now"{%endif%}> 
                      {{ 'sections.featured_product.shop_now' | t }}  
                    </a>                      
                    {% endif %}
                  </div>
                   
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>   
    {% if section.settings.slideshow_width == 'standard-width' %}
  </div>
  {% endif %}
 </div>
</section>
{% endif %}
<!-- Home slider end -->

[ronpat]

Can you post a link to your test site? We cannot interpret the code within “{%%}”. We need to see HTML and CSS.

[Mosaab]

Here is my site thank you

[ukoutreachexpert]

I created some really simple flat responsive buttons which I was going to upload to theme forest as a little experiment. CSS preprocessors help make authoring CSS easier. a> AND LINK THE button-styles.css TO YOUR HTML PAGE.

[Mosaab]

i am sorry i have no html or css background knowledge , i just copy past things , so i don’t really have an idea what you talking about

[SamA74]

On mobile you need to get it to work as far down as 320px wide.
With a width of 300px plus a 100px left margin that’s never going to happen.

@Mosaab

on pc looks great

So what you need to do is figure out at what width it starts to look bad.
Then add a media query at that width with different CSS for the button which works on mobile, such as auto width with a small margin.

[Mosaab]

@PaulOB

[Ray.H]

@Mosaab

i am sorry i have no html or css background knowledge , i just copy past things

Hi,
I’m not sure what your plans are, or whether you have a desire to learn anything about html and css. When you show a desire to learn (rather than just copy/pasting) you will find that people around here will gladly help you when you have trouble with the code your writing.

I would suggest you start at the beginning with these links from MDN.

Introduction to HTML
Introduction to CSS

At some point, we all had to write our first “Hello World” page.

[Mosaab]

Hi Ray thank you for replying
i am just building a shopify store for myself and you know shopify has premade templates,
so i am trying to edit the code in this templates to customize some buttons and sections … i have no knowledge of html or css but i am learning just through these edits i am doing and by searching on google etc .
I faced this problem with this button i was editing and i posted a question in here … thanks to the guys who replied i got and idea of what i can do to solve it and i think i am on the right path i made it look nice on mobile too and here is the code i added

i am liking the language and i may start learning soon thank you all i would like to get some feedback on what i did

.sbtn {
  background-color: black;
  color: white ;
  border: 4px solid white;
  height:70px; 
  width:300px;
  font-size: 3rem;
  margin-top: 40rem;
  margin-left: 41%;
  
  display: flex;
  align-items: center;
  justify-content: center; 
}

@media (min-width: 1274px) and (max-width: 1590px) {
  
 .sbtn{
  height:70px; 
  width:300px;
  font-size: 3rem;
  margin-top: 40rem;
  margin-left: 41%;
  
  
        }
  
}

@media (min-width: 1025px) and (max-width: 1274px) {
  
  .sbtn{
  height:70px; 
  width:300px;
  font-size: 3rem;
  margin-top: 40rem;
  margin-left: 41%;
  
  
        }
  }

@media (min-width: 768px) and (max-width: 1025px) {
  
  .sbtn{
  height:70px; 
  width:300px;
  font-size: 3rem;
  margin-top: 40rem;
  margin-left: 41%;
  
  
        }
  
} 

@media (min-width: 481px) and (max-width: 768px) {
  
  .sbtn{
  border: 1px solid white;
  height:37px; 
  width:170px;
  font-size: 16px;
  margin-top: 40rem;
  margin-left: 41%;
  
  
        }
  
}

@media (min-width: 320px) and (max-width: 481px) {
  
  .sbtn{
  border: 1px solid white;
  height:37px; 
  width:170px;
  font-size: 16px;
  margin-top: 12.5rem;
  margin-left: 30%;
  
  
        }
  
}

[PaulOB]

@Mosaab

i would like to get some feedback on what i did

In CSS simple is better and you have made that much to complicated and much to reliant on magic numbers. This is not surprising and is something all beginners do.

For example your top margin of 40rem is not a maintainable value as it relies on everything else being consistent which is not true on a responsive layout. The button should have been placed in relation to the element you want it to keep track. As you wanted it on top of the image then you would usually create a stacking context with position:relative on the image container and then absolutely place the button at the bottom of the image. You wouldn’t need any magic numbers and could rely on auto margins for horizontal centring and simply use bottom:0 to sit on the bottom of the image even when it scales The media queries could then just shrink the button at appropriate points.

You also seem to have an empty .col in that section also which is stopping things from being positioned nicely anyway.

I never use media queries like this:

@media (min-width: 1274px) and (max-width: 1590px) {

That makes my head hurt just looking at it.

All you are doing there is styling content that sits in the range of a screens size that is between 1274px and 1590px wide. That is rarely of any use. You will very rarely mix media queries like that. Choose one method (either min-width or max-width) and then apply that in descending(or ascending order).

e.g.

@media screen and (max-width: 1590px) {start styles here for all below 1590px}

Then at your next breakpoint you just change what you need again.

@media screen and (max-width: 1190px) {start styles here for all below 1190px}
.
Generally though you would avoid multiple media queries in favour of better responsively designed elements that adapt fluidly themselves.

There’s probably too much for you to change at the moment given your level and the complexity of the design in front of you and as others have said we are here to help people learn and not just fix things for free