CODEWITHSUNDEEP
csssassmedia-queries
eziodude98
eziodude98

Reputation: 79

How do I correctly use Media Query to cause one column to disappear and the other to adjust to the width of the screen?

In my class we are starting to use Media Queries and I am having a little trouble with an assignment. For a previous assignment we were tasked with remaking a website called "the Toast" as best we could, which I have here. Now for this assignment we are to use media query to do a few things:

This assignment is all about media queries and getting your site to be responsive. We will be using the website The toast again for this assignment. You will be laying out two columns for the content area. When the screen size hits 960px the right column must disappear. The articles in the left column must adjust to the width of the screen. The images must get bigger and fill the article at 960 px as well.

At 760 px the support us button, love the toast text and the social media must disappear.

In the code I have two columns, a "bigColumn" and a "adColumn". Now to my understanding to make the adcolumn disappear and adjust the bigColumn I simply have to add:

@media only screen and (max-width: 960px) {

  .main {

    .bigColumn {
      width: 100%;
    }

    .adColumn {
      display: none;
    }
  }
}

However this is not working. The ad never disappears and the rest of the content doesn't do anything in terms of filling the rest of the page when shrinking the window. If I change the background color in the .main the color changes, but changing anything in the two divs has no effect that I can see. I can get the social media icons to disappear at 760px just fine, so am I just missing something with the media query for the columns? Or could something else be interfering with it?

EDIT: Guess I should mention that yes, I am indeed using SASS in the project. Here is the styling I have for the columns before I started the media query:

.main {
  width: 90%;
  display: flex;
  min-height: 200px;
  margin: 0 auto;
//column for main-page content
  .bigColumn {
    width: 800px;
    height: 100%;
    margin-top: 20px;
    margin-right: 9%;
    margin-left: 13%;
    }
.adColumn {
    margin-top: 20px;
    position: relative;
    min-height: 120px;

  }
}

Upvotes: 0

Views: 910

Answers (2)

D. Stevens
D. Stevens

Reputation: 74

Based on your css I think you're close, but there appears to be a an error in the way you've structured your css. Give this a try. I'm assuming .bigColumn and .adColumn are children of .main:

/* All screens 960px or less */
@media only screen and (max-width: 960px) { 
    .main .bigColumn {
      width: 100%;
    }

    .main .adColumn {
      display: none;
    }
}

Upvotes: 0

Casey Anderson
Casey Anderson

Reputation: 462

I don't believe you can nest your CSS like that unless you are using a preprocessor like LESS or SASS. Try taking the .bigColumn CSS out of the .main brackets and leave it on its own.

@media only screen and (max-width: 960px) {

  .bigColumn {
     width: 100%;
   }

   .adColumn {
      display: none;
   }

}

Upvotes: 0

Related Questions