Media Query help, Reducing image columns with a media query |
Media Query help, Reducing image columns with a media query |
Binaary |
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 Mobile Any help as to why this isn't working would be greatly appreciated! |
pandy |
Feb 3 2021, 02:37 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 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?
|
Binaary |
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. |
pandy |
Feb 4 2021, 07:59 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 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.
|
Christian J |
Feb 4 2021, 10:37 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,722 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?
|
pandy |
Feb 4 2021, 03:47 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 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. |
Christian J |
Feb 4 2021, 04:34 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
The OP posted a correction in Post #3.
|
pandy |
Feb 4 2021, 04:39 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
Oh! I never saw it. He must have posted while I typed my ever so brilliant answer.
|
pandy |
Feb 5 2021, 07:53 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 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/ |
Christian J |
Feb 5 2021, 11:53 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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. |
Lo-Fi Version | Time is now: 21st September 2024 - 01:48 PM |