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

CSS Media Query, won't read the first code – SEO

So I code a CSS from Mobile Version first. After that I modify it to the larger screen.
When I do the larger screen, it’s affect the smaller screen view, even I’ve set the value for smaller screen view.

CSS structure:

.m-dwSeotSecondSection__featureGroup {
    text-align: center;
    width: 80%;
    margin: 4em 0 4em 0;
}

@media only screen and (min-width:800px){

        .m-dwSeotSecondSection__featureGroup {
    width: 22.5%; } 
}

The HTML structure:

<div class= "m-dwSeotSecondSection__fgContainer">
                <div class="m-dwSeotSecondSection__featureGroup -seo">
                    <div class="a-dwSeotSecondSection__icon -seo">
                    </div>
                    <div class="a-dwSeotHeading -heightdefined">
                    </div>
                    <p class="a-dwSeotDesc">
                    </p>
                </div>
    </div>
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    It was answered by @Anuresh and @vuskovic09 I forgot to add


  2. 0

    I am not sure if you want to default to the initial styles. If so, then maybe this will work:

    .m-dwSeotSecondSection__featureGroup {
text-align: center;
width: 80%;
margin: 4em 0 4em 0;
border: 1px solid black
}

@media only screen and (min-width:800px) {
  .m-dwSeotSecondSection__featureGroup {
  width: auto;
  margin: auto;
  border: 1px solid black
  }
}
    Login or Signup to reply.
  3. 0

    I think Media query will help you like

    if you want to effect the given css in some specific screen then give media query like this

    @media only screen (min-width: 767px) and (max-width: 1200px){
    .class{
         property: value;
    }
}

    now this css will only effect on greater then 767px width and less then 1200px width device. so it will not effect to other style

    Login or Signup to reply.
  4. 0

    The CSS looks just fine, just check in your HTML head section if you have the following line:

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search