The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Media Query help, Reducing image columns with a media query
Binaary
post Feb 3 2021, 09:59 AM
Post #1





Group: Members
Posts: 2
Joined: 3-February 21
Member No.: 27,766



After a few months of not touching html and having some spare time on my hands I've decided to improve my knowledge. I've started following a tutorial on making a gallery with different image heights, however trying to make it responsive is becoming a challenge.

This is the video that I've been following: https://www.youtube.com/watch?v=KI3h2RIMW2E


HTML
CODE

    <div class="container">
        <div class="m-block"><img src="images/pic1.png"></div>
        <div class="m-block"><img src="images/pic2.png"></div>
        <div class="m-block"><img src="images/pic3.png"></div>
        <div class="m-block"><img src="images/pic4.png"></div>
        <div class="m-block"><img src="images/pic5.png"></div>
        <div class="m-block"><img src="images/pic6.png"></div>
        <div class="m-block"><img src="images/pic7.png"></div>
        <div class="m-block"><img src="images/pic9.png"></div>
        <div class="m-block"><img src="images/pic10.png"></div>
        <div class="m-block"><img src="images/pic3.png"></div>    
    </div>    



CSS and @media



CODE

.container{
    column-count:3;
    column-gap:10px;
    max-width:1800px;
    margin: 0 auto;
    padding-left: 10%;
    padding-right: 10%;
}

.m-block img{
    width: 100%;
    cursor:pointer;
    padding: 10px;
    display:block;
    height:auto;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px){
    .container{
        column-count: 3;
    }
}    

@media screen and (max-width: 640px){
    .container{
        column-count: 2;
    }
}    

@media screen and (max-width: 375px){
    .container{
        column-count:3;
    }
}    




Full width
IPB Image

Mobile
IPB Image


Any help as to why this isn't working would be greatly appreciated!

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 3 2021, 02:37 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



In what way does it go wrong? The screen caps show one page with three columns and one with two columns. Isn't that what you wanted?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Binaary
post Feb 4 2021, 07:53 AM
Post #3





Group: Members
Posts: 2
Joined: 3-February 21
Member No.: 27,766



Sorry just noticed the above code is slightly wrong and should be as follows:


CODE
@media screen and (max-width: 375px){
    .container{
        column-count:1;
    }


At the minute when I shrink the page the images grow smaller and on a mobile device screen size still has two columns. I'm trying to keep the image sizes the same, however on a tablet screen have 2 columns of images and mobile screen size have have 1 column.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 4 2021, 07:59 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I'm not good at media queries, but AFAIK see you haven't specified one column anywhere. You have 3, 2 and then 3 again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 4 2021, 10:37 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



"max-width: 375px" is not much on a modern mobile phone, even in portrait orientation. Maybe the browser window never gets that narrow?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 4 2021, 03:47 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



No. I have a budget phone and its resolution is 1080*1920. About the same resolution of the desktop screen I had before this one.

But be as it may with that, there is no one column layout specified in the CSS.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 4 2021, 04:34 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



The OP posted a correction in Post #3.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 4 2021, 04:39 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Oh! I never saw it. He must have posted while I typed my ever so brilliant answer. laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 5 2021, 07:53 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Isn't there a better way to do this? I've always thought resolution is wonky. And now when a phone can have larger resolution than a small laptop it certainly doesn't cut it.

Seems there are APIs... I got brain fog half way through this.
https://www.devicedetection.com/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 5 2021, 11:53 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Feb 5 2021, 01:53 PM) *

Isn't there a better way to do this? I've always thought resolution is wonky. And now when a phone can have larger resolution than a small laptop it certainly doesn't cut it.

There's the concept of "portrait mode", but I don't know if it's better: https://developer.mozilla.org/en-US/docs/We...dia/orientation --at least it indicates that the user's window is relatively narrow.

Here's another idea (from memory):

- When the page is wider than the image files' intrinsic width, use as many columns as there is room for. Maybe traditional floats work better for this than the column-count property, since you don't need to define the number of floated columns explicitly in the CSS.

- When the page is narrower than the image files' intrinsic width, use a media query to create a single column layout together with img {width: 100%}. That way, the image will expand to fill the available space.

QUOTE
Seems there are APIs... I got brain fog half way through this.
https://www.devicedetection.com/

It seems to rely on User Agent sniffing:
"The ScientiaMobile team constantly monitors the "user-agent" space (as observable thanks to billions of requests logged by its Cloud systems) looking for unrecognized or wrongly recognized user-agent. Upon discovering on unrecognized user-agent, the team will either add new profiles to the repository or, in some cases, design improvements to the matching logic to ensure correct detection (and avoid false positives)."

...so I guess you'd have to link to their third-party repository in order to keep it up to date.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 11:33 AM