Css code to Change logo size for web view and for mobile view

rcharles10101 · July 2015

Hi guys already purchased like 2 licences for bethemes pretty awesome, will be getting a 3rd one on september, anyway need help.

Css code to Change logo size for web view and for mobile view, as well as removing the search icon

http://www.evernote.com/shard/s644/sh/9756d229-ee01-4a41-9db0-ec9dde172342/9d5e31242c4f443e05837221e02d14a1

thanks for your help guys.

Albert · July 2015

Hi,

any url to page where you want to do this?

rcharles10101 · July 2015

you could see it in the image I posted.

the site is

www.foxgroup.co.uk

that is the layout I wanted, so I want to have control on changing the logo size for both web and mobile view.

currently in mobile view with my samsung S6 it shows very small logo.

rcharles10101 · July 2015

www.foxgroup.co.nz <--- the correct url

Albert · July 2015

Ok. But as we see, logo looks fine and it's maximum width of logo space. In this case it won't be unfortunately to increase logo size on desktops and mobile devices.

But to remove icon, please go to Theme options > Header & Subheader > Extras section.

rcharles10101 · July 2015

but the logo is so small in mobile view, I want to enlarge the logo a bit

rcharles10101 · July 2015

please help

Albert · July 2015

This won't look good as we wrote, but if you really want to enlarge logo, you can play with below css:

#Header_creative #Top_bar #logo img { max-height: 150px !important; }
#Header_creative #Top_bar { height: 150px !important; }
#Header_creative #Top_bar #logo { height: 150px !important; }

rcharles10101 · July 2015

hi is this for the mobile view? or would this affect the web view also?

also I would need help with these areas to finish up the site

url: www.foxgroup.co.nz

http://www.evernote.com/shard/s644/sh/47dde86b-c059-47d8-9150-fdb7f93b4d9f/bd25bdf16f9d94176605e661196dd1e5

http://www.evernote.com/shard/s644/sh/7d1e6727-a7f0-4e88-89a4-a5c82aba7c76/cd16715edfa046e64ff6deee66674557

please help me fix these problems so I can do on an purchase my 3rd license for my 3rd website.

thanks.

Albert · July 2015

This is not for a mobile view only. If you want this code for mobile view, then wrap code into media screen, like below:

@media only screen and (max-width: 767px) {
    #Header_creative #Top_bar #logo img { max-height: 150px !important; }
    #Header_creative #Top_bar { height: 150px !important; }
    #Header_creative #Top_bar #logo { height: 150px !important; }
}

All media screen sizes you can check under responsive.css file.

rcharles10101 · August 2015

I would need help with these areas to finish up the site, please review the link to go to the website and view the image link thanks.

url: www.foxgroup.co.nz

http://www.evernote.com/shard/s644/sh/47dde86b-c059-47d8-9150-fdb7f93b4d9f/bd25bdf16f9d94176605e661196dd1e5

http://www.evernote.com/shard/s644/sh/7d1e6727-a7f0-4e88-89a4-a5c82aba7c76/cd16715edfa046e64ff6deee66674557

please help me fix these problems so I can do on an purchase my 3rd license for my 3rd website.

thanks.

rcharles10101 · August 2015

cause there is a huge space that I need remove between the header and the 1st section for the page

rcharles10101 · August 2015

also already have it in full width | full width but it doesn't cover the entire area

Albert · August 2015

The 1st padding is related with margin top for the content section. This can be removed with below css:

body:not(.template-slider) #Content { margin-top: 0 !important; }

But the 2nd padding is related with margin bottom for h6 tag. This can be removed with below css:

h6 { margin-bottom: 0 !important; }

but please notice that above css will remove padding for other places where h6 tag was used as well.

However the map is not full width due to the fact that we had an issue in one of the latest versions. Please update your theme to version 9.0 and all should be fine.

Css code to Change logo size for web view and for mobile view

Comments