how to change scaling of logo in phone?

[bangsters]

Website URL
https://www.pixelsbin.com

Chevereto version
3.10.1

Description of the issue
Hello. I almost got my css the way I like it. My only issue now is the logo is too big when viewed from phone. How can I change the scaling of the logo only when viewed in phone? I like the size when in desktop.

 

[Focker]

Nice logo... What inspired your design? 😉

What about playing with these numbers located in the Dashboard under Theme?

Custom CSS code:
.top-bar-logo img{height:80px;margin-top:-15px;}#index

 

[bangsters]

Nice logo... What inspired your design? 😉

What about playing with these numbers located in the Dashboard under Theme?

Custom CSS code:
.top-bar-logo img{height:80px;margin-top:-15px;}#index

Yea got the squares from you bro. Then some of my touches and whallaaa.... 🙂

Wouldn't those numbers affect both desktop and phone? I need only the phone rendering one, as the logo is too big it is overlapping with the cloud logo. For now I made the logo smaller, from 60 to 40 to make do.

 

[Focker]

Wouldn't those numbers affect both desktop and phone?

Shoot, you're right. Your site looks good in landscape mode on my phone, but it's jacked in portrait mode.

 

[bangsters]

Shoot, you're right. Your site looks good in landscape mode on my phone, but it's jacked in portrait mode.

by the way, what you think of how the images show up? Made some changes. looks nice when you view the image.

 

[Rodolfo]

.phone .selector {}
.laptop .selector {}

 

[bangsters]

Thanks @Rodolfo will try that once I get a chance. Awesome support as always.

 

[Focker]

by the way, what you think of how the images show up?

Are you talking about the frame and shadow around the images when viewing one at a time?

Nice.

 

[bangsters]

Are you talking about the frame and shadow around the images when viewing one at a time?

Nice.

yup 🙂 and whole image shows. I scaled the height 🙂

 

[Focker]

You should post how in the style section.

 

[bangsters]

Yep most definite, just ironing out some other settings I'm working on, then will post the changes I did.

 

[bangsters]

.phone .selector {}
.laptop .selector {}

Uhmm how do I use it? I added it in the style.css below .phone body.landing {} . I added it like this:

.phone .selector { display:none;}
.laptop .selector {}


I put display:none to test it out... which should disable the logo when viewed from phone, but it doesn't seem to work. What am I doing wrong?

Thank you.

 

[Rodolfo]

.selector must be a valid selector. Top logo selector is:

.top-bar-logo

 

[bangsters]

.selector must be a valid selector. Top logo selector is:

.top-bar-logo

ahh ok now that makes sense. trying now.

 

[bangsters]

Update:

.laptop .top-bar-logo { display:none:} works but .phone .top-bar-logo { display:none;} does not work...

also, anything else in .laptop .top-bar-logo such as height:100px; does not work as well. only display:none seems to work inside the .laptop .top-bar-logo

 

[bangsters]

Got it to work, somewhat 🙂

.laptop #logo img {
height:60px;
}
.laptop #logo {
top:15px;
}


The .phone .selector does not work, so my work around is I put it in the settings what I want the phone to be, and the .laptop overrides it for desktop 🙂

 

[Focker]

The logo still is still interfering with the text on the main page.

 

[bangsters]

on phone logo is small now. try refreshing. send me screenshot.

my issue now is reducing the h1 font on phone.... I am able to change on desktop but it's not reflecting on phone

 

[Focker]

You got it... Looks better.

 

[bangsters]

looks like I needed to put the css changes in the dashboard inside the custom css box. If I put directly on the style.css file, the phone does not reflect the changes.