1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Resizing CTA button & keep it responsive

Discussion in 'HTML & Website Design' started by dabidovic123, Mar 4, 2020.

  1. #1
    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.
    SEMrush
     
    dabidovic123, Mar 4, 2020 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,375
    Likes Received:
    1,347
    Best Answers:
    24
    Trophy Points:
    400
    #2
    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, Mar 5, 2020 IP
  3. Efetobor Agbontaen

    Efetobor Agbontaen Banned

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    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
     
    Efetobor Agbontaen, Mar 13, 2020 IP
  4. Efetobor Agbontaen

    Efetobor Agbontaen Banned

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    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.
     
    Efetobor Agbontaen, Mar 13, 2020 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,298
    Likes Received:
    1,801
    Best Answers:
    244
    Trophy Points:
    515
    #5
    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.
     
    deathshadow, Mar 18, 2020 IP
  6. LewisH95

    LewisH95 Greenhorn

    Messages:
    93
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    13
    #6
    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)
     
    LewisH95, May 4, 2020 IP