Remove LOGO on desktop (but not mobile)

sudobailey
(@sudobailey)

3 years, 5 months ago

First off let me apologize for the site, it’s currently redirecting to an old version while I get some kinks worked out on it.
But I’m hoping someone can help me without having to remove the redirect.

My problem is simple, I’m hoping there’s a way to show the logo ONLY on mobile. Also I plan to center the logo on mobile if that matters.

But on desktop, there’s a nice animated video logo that’s been reduced to a very small file size and looks great on desktops. Therefore the logo is in the way.

Im using a child theme

And the parent theme is the “Twenty Seventeen” theme

Any help is greatly appreciated!

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

HudsonValleyWebDesign
(@jaycbrf)

3 years, 5 months ago

That can easily be accomplished with CSS media queries. There is no way to offer you custom CSS without a live link to the site.

Here is a basic tut on Media Queries. Just create a rule for below desktop and one for desktop and above.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thread Starter sudobailey
(@sudobailey)

3 years, 5 months ago

omg i did not realize someone responded to this thread. thank you so much for responding. im going to make the page live and ill get back to you in a few

Thread Starter sudobailey
(@sudobailey)

3 years, 5 months ago

okay, the site is live at http://www.CleanYourDirty.online

Ideally, I want the logo to show up on mobile and not on the desktop view, also it would be really nice for it to also be “centered” on mobile if that’s not too difficult.

but now for some odd reason, the Logo isn’t showing up at all on mobile. but it does show up on the desktop… I even tried deleting all of the CSS edits that were listed for the page. (admittedly, I put this code in weeks ago and I don’t even remember what this code was intended to do.)

for reference, I have copied it here:

.custom-header-media:before {
background: none;
}

@media screen and (max-width:860px){
.custom-header-media:before{background:transparent !important}
}

Thread Starter sudobailey
(@sudobailey)

3 years, 5 months ago

I see my logo is back again in the mobile view… but it’s not centered and I’m still trying to figure out how to make it stop showing up on Desktop.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Remove LOGO on desktop (but not mobile)’ is closed to new replies.

Remove LOGO on desktop (but not mobile)

Topic Tags

Views