[SOLVED] css problem with image

error403 · 2020-06-10 01:16:19

hello, I newbie programming so...

I have a logo on the right top of my navigation menu. So, when I change the size of the window, the logo moves to the left top of the navigation menu. I mean, is not responsive.

https://diegoirc.github.io/chathispano/

You can see it by yourself because I think I'm not explain it well.

I want to keep the logo on his original place or just hide it when we see it through the mobile devices.

Thank you.!
sorry for my bad english.

Last edited by error403 (2020-06-13 20:51:46)

Trilby · 2020-06-10 02:34:58

It looks the same on mobile and desktop for me. You'll have to actually describe the problem as your link does not demonstrate it.

If you do just want to hide the logo on mobile, you'll need to add a mobile media query to the css - right now the same content and settings are provided regardless of the client device.

ackt1c · 2020-06-10 15:20:39

Drop

Last edited by ackt1c (2022-11-05 13:29:58)

Trilby · 2020-06-10 15:39:46

First, you have the media query logic backwards: that will hide the logo on any browser width larger than 320px (well, actually any larger than 319px). For the intended purpose, you should use "max-..." in your media query.

Also, while there are arguments going both ways, I've always found the max-device-width to be a much more useful query for detecting mobile screens as it is not subject to scaling (which can result in the mobile css not being applied as intended).

Lastly, 320 is extremely restrictive. That query would apply to a vanishingly small portion of modern mobile devices, pretty much just smart watches. So the logo would still be displayed on a majority of phones.

Last edited by Trilby (2020-06-10 15:42:46)

error403 · 2020-06-10 21:22:26

ackt1c wrote:

When making a Response site you have to declare in either your .css file included or a style block
@media screen and (min-width: 320px) {

    .logotipo {
        display: none;
    }

}
.

thanks, I resolve it but using max-width instead min-width and given it a 920px. Now it works

ty regards

Last edited by error403 (2020-06-10 21:22:49)

Arch Linux

#1 2020-06-10 01:16:19

[SOLVED] css problem with image

#2 2020-06-10 02:34:58

Re: [SOLVED] css problem with image

#3 2020-06-10 15:20:39

Re: [SOLVED] css problem with image

#4 2020-06-10 15:39:46

Re: [SOLVED] css problem with image

#5 2020-06-10 21:22:26

Re: [SOLVED] css problem with image

Board footer