Html - I am having trouble getting the below fixed

GillHetti
October 7, 2023
145 views
0 votes
2 Answers

Please I need help fixing this code to be responsive. It looks normal when in desktop browsers but on mobile devices the buttons does not work. below is the code I really need help to get this done.

.aos-animate.plan__tabs-row {
    visibility: inherit;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.aos-animate.plan__tabs-row {
    visibility: inherit;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.plan__tabs-row {
    margin: 25px 0;
    position: relative;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: hidden;
}
.plan__tabs-row {
    margin: 25px 0;
    position: relative;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: hidden;
}

<div class="plan__tabs-row aos-init aos-animate" data-aos="animation">
  <div class="plan__tab-conteiner">
    <button class="plan__pm-action check"><i></i> Precious Metals</button>
    <button class="plan__real-action"><i></i>Real Estate</button>
    <button class="plan__energy-action"><i></i> Energy</button>
    <button class="plan__forex-action"><i></i>Forex</button>                
  </div>
</div>

Tags: css html

Answers

To achieve responsive button design on mobile devices, you can employ media queries to tailor the appearance of your buttons when the screen dimensions are reduced. Here’s an illustration of how you can customize your code for this purpose:

.aos-animate.plan__tabs-row {
    visibility: inherit;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.aos-animate.plan__tabs-row {
    visibility: inherit;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.plan__tabs-row {
    margin: 25px 0;
    position: relative;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: hidden;
}
.plan__tabs-row {
    margin: 25px 0;
    position: relative;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: hidden;
}

        /* Mobile styles */
        @media (max-width: 768px) {
            .plan__tab-conteiner {
                flex-direction: column;
            }

            .plan__tab-conteiner button {
                margin-bottom: 10px;
                width: 100%;
            }
        }

    <div class="plan__tabs-row aos-init aos-animate" data-aos="animation">
        <div class="plan__tab-conteiner">
            <button class="plan__pm-action check"><i></i> Precious Metals</button>
            <button class="plan__real-action"><i></i> Real Estate</button>
            <button class="plan__energy-action"><i></i> Energy</button>
            <button class="plan__forex-action"><i></i> Forex</button>                
        </div>
    </div>

This is merely an illustration; you can achieve even better results using @media queries. 600px for mobiles and 768px for tablets

The best way to fix that is to create functions in your script:

HTML:

<div class="plan__tabs-row aos-init aos-animate" data-aos="animation">
   <div class="plan__tab-conteiner">
      <button class="plan__pm-action check" onclick="Meta()"><i></i> Precious Metals</button>
      <button class="plan__real-action" onclick="Esta()><i></i>Real Estate</button>
      <button class="plan__energy-action" onclick="Ener()><i></i> Energy</button>
      <button class="plan__forex-action" onclick="Fore()><i></i>Forex</button>                
   </div>
</div>

JS:

function Meta(){
  //Code
}
function Esta(){
  //Code
}
function Ener(){
  //Code
}
function Fore(){
  //Code
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I am having trouble getting the below fixed

Answers