seo Question posted in
Some basic information to get you started with this can be found here.

Remove CSS attribute when under certain resolution – SEO

I have a few sections and the most popular one stands out

[![enter image description here][1]][1] 
<div class="plan popular">
              <div class="price">
                <span class="amount" data-dollar-amount="79">Expert</span><br>
                <span class="dollar">$</span>
                <span class="amount" data-dollar-amount="79">79</span>
                <span class="slash">/</span>
                <span class="month">mo</span>
              </div>
                <p class="pop-plan">Most Popular Plan</p>
             <span>Track <b><font color="#13BD9B">1000</font></b> Keywords</span><br><br>
                <span>Get Mobile Rankings</span><br><br>
               <span>SEO Competitors</span><br><br>

                <span>Daily Updates</span><br><br>

              <span>Task Management
</span><br><br>
              <span>Unlimited Sites
</span><br><br>Unlimited Users
 <a class="button sign-up" href="https://orders.gigenetcloud.com/order.php?quick=79,40,2048,730">Sign Up</a>
            </div>

Here is the code for a section. The green one is simply part of the class named “popular”. If I delete that part and let the div be of class “plan” then it is normal, with black like the rest.
I want to make it responsive, so when the resolution is low and only one section/line is shown, the green one loses the “plan” class and turns to normal to avoid bloating on smaller devices.

Right now it would look like this when resizing

[![enter image description here][2]][2]

thank you

Tags:

2

Answers


  1. 0

    You could use media queries to accomplish this. You can read more about it here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

    You would need to determine at what resolution you would want. Then set you css for what you want.

    Login or Signup to reply.
  2. 0

    Wrap your style for .popular in a media query. like this:

    @media screen and (min-width: 768px){
    .popular {
        border:2px solid green;
        /*rest of the styles*/
    }
}

    This way your popular class will only be applied if the screen size is more than 768px.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search