You are not logged in.

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

error403
Member
Registered: 2020-06-05
Posts: 5
Website

[SOLVED] css problem with image

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)

Offline

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

Trilby
Inspector Parrot
Registered: 2011-11-29
Posts: 23,727
Website

Re: [SOLVED] css problem with image

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.


"UNIX is simple and coherent..." - Dennis Ritchie, "GNU's Not UNIX" -  Richard Stallman

Offline

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

ackt1c
Member
From: Visalia, California
Registered: 2012-10-10
Posts: 237

Re: [SOLVED] css problem with image

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;
    }

}

This will hide the logo when the window resolution is 320px (mobile). Use inspection mode in your browser and mobile view to the desired portal resolution.

Offline

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

Trilby
Inspector Parrot
Registered: 2011-11-29
Posts: 23,727
Website

Re: [SOLVED] css problem with image

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)


"UNIX is simple and coherent..." - Dennis Ritchie, "GNU's Not UNIX" -  Richard Stallman

Offline

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

error403
Member
Registered: 2020-06-05
Posts: 5
Website

Re: [SOLVED] css problem with image

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)

Offline

Board footer

Powered by FluxBB