topic Re: Media query for responsive columns in CMS Development

Media query for responsive columns

Ckleming — Wed, 04 Mar 2020 06:43:43 GMT

Currently finishing my CMS for developers practicum, but I am stuck on one last requirement.

"Must be 4 equal columns wide on large screens and 2 equal columns wide on screens below 900px."

I have tried different media queries, but can't find the right one.

Any tips ?

Re: Media query for responsive columns

DanielSanchez — Wed, 04 Mar 2020 12:32:40 GMT

Hi @Ckleming

Congratulations on finalizing the certificate. This training is very good!

Look how use media query:

HTML

<div class="my-column">
   Content here
</div>
<div class="my-column">
   Content here
</div>
<div class="my-column">
   Content here
</div>
<div class="my-column">
   Content here
</div>

CSS

.my-column{ 
    width:25%;
}

@media (max-width:900px){
    .my-column{
         width:50%;
    }
}

in this example I ignored all the other CSS formatting, to show only the responsiveness of the media query.

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!

Re: Media query for responsive columns

Ckleming — Wed, 04 Mar 2020 16:21:00 GMT

Thank you @DanielSanchez,.

I have tried this media query. I think my main problem is to use it correctly.

My 4 "columns" are made by grouping an image and custom module. Well I actually have 4 on first row + 2 on second row. Not sure how and where to apply the correct css-class and then define that they are 25%. If that makes any sense.

I have sucessfully used media queries on other things.

Re: Media query for responsive columns

DanielSanchez — Wed, 04 Mar 2020 16:40:25 GMT

I understand. In this case, you need to do 1 CSS training yourself and practice, as it is a mandatory coding to create responsiveness in your projects.

If you want, paste your HTML and CSS code in response, which I help you correct, but it would be important for you to see a video or website explaining about CSS and media query to train and practice until you find out where your code is wrong. This will take you to another level.

The example I sent you above is the application of the media query in the CSS, if you haven't understood it, then I think it's important to train and practice CSS before. He skipped a step.

I hope to help and I will be available to answer questions about CSS whenever you need.

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!

Re: Media query for responsive columns

Ckleming — Wed, 04 Mar 2020 16:48:43 GMT

I agree @DanielSanchez . I need to be comfortable with all elements.

Yes, I am new to CSS, but still, I am nearly there. I have studied alot.

I have applied the div class in html and the media query in my stylesheet, but my columns does the exact opposite of what I need. I`ll study some more and get it eventually.

Thanks anyway.