C2A for mobile/tablet resizes huge

  • Unknown's avatar
    x3oimprov · Member ·

    Hey guys,

    I’ve been able to get pretty far in building my site by simply referencing these help forums, but I finally got stuck and would appreciate some assistance if possible….

    I’ve been creating call to action buttons, mainly by using a plugin called jobify made by astoundify. The buttons look great, except that the text is of different lengths inside each c2a button. This means that the buttons themselves resize automatically which is good and bad for me.

    I’m looking to achieve two things:

    1) have the c2a buttons be of a “fixed” length and width that will fit the text inside, and be centered and aligned for a normal non-mobile display.

    2) to not have these “fixed values” applied in mobile/tablet view because when I switch to responsive mode, the buttons are huge and don’t fit in the screen, they continue out of the visible range.

    this is the modified button with fixed size to be centered on a non mobile screen:
    https://s9.postimg.org/esqnnpnnv/non_divy_normal.png
    *as you can see, the c2a buttons do look proportionate and off.

    this is the modified responsive example:
    https://s9.postimg.org/7cre1xfe3/non_divy_responsive.png
    *as you can see, the c2a buttons in mobile go off screen instead of automatically fitting inside the view-able area.

    This is the “styled html”: 

    <div class="side-buttons">
    <div class="left-button"><a class="button button--size-large" style="height:75px;width:325px" href="/referrals-to-us/">Affiliates</a></div>
    <div class="right-button"><a class="button button--size-large" style="height:75px;width:325px" href="/become-a-partner">Join Our Alliance Network </a></div>
    </div>
    <br>
    <br>
    <div class="side-buttons">
    <div class="left-button"><a class="button button--size-large" style="height:75px;width:325px" href="/revenue-sharing/">Marketplace Sellers</a></div>
    <div class="right-button"><a class="button button--size-large" style="height:75px;width:325px" href="/local-alliance-networkers/">Local Alliance Networkers</a></div>
    </div>
    <br>
    <br>
<div class="1-buttons">
    <div class=""><a class="button button--size-large" style="height:75px;width:325px" href="/referrals-to-you/">Affiliates<br>Get rewards for referring business to 123456789.<br>Solution Providers</a></div>

    this is the “non styled html” which resizes correctly, but does not align and generates c2a buttons that are of different sizes:

    <div class="side-buttons">
    <div class="left-button"><a href='/myreferrals//' class='button'>Refer A Friend</a></div>
    <div class="right-button"><a href='/myaccount/' class='button'>Manage Account</a></div></div>
  • Unknown's avatar
    thesacredpath · Member ·

    Hi @x3oimprov, I’m not seeing any WordPress.com hosted sites associated with your username. These forum are for those hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org forums.

    The differences between WordPress.com and WordPress.org.

    I would have taken a quick look at your site to see if I could get you started, but you did not give us a link.

  • The topic ‘C2A for mobile/tablet resizes huge’ is closed to new replies.