Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ Media Query help

Posted by: Binaary Feb 3 2021, 09:59 AM

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

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!

Posted by: pandy Feb 3 2021, 02:37 PM

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?

Posted by: Binaary Feb 4 2021, 07:53 AM

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.

Posted by: pandy Feb 4 2021, 07:59 AM

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.

Posted by: Christian J Feb 4 2021, 10:37 AM

"max-width: 375px" is not much on a modern mobile phone, even in portrait orientation. Maybe the browser window never gets that narrow?

Posted by: pandy Feb 4 2021, 03:47 PM

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.

Posted by: Christian J Feb 4 2021, 04:34 PM

The OP posted a correction in Post #3.

Posted by: pandy Feb 4 2021, 04:39 PM

Oh! I never saw it. He must have posted while I typed my ever so brilliant answer.

Posted by: pandy Feb 5 2021, 07:53 AM

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/

Posted by: Christian J Feb 5 2021, 11:53 AM

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/Web/CSS/@media/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.