Mobile Image Size & Centered Header Logo


#1

Hi

Three questions please!

I would like to center my company logo on the header. How can I do this?

Also, I cannot get the image to size correctly on mobile. I have tried a couple of custom css codes from the forum. I would also like to adjust the font size of the type text.

How can I make the button solid instead of just outlines?

site: eventdog.com

Thank you!


#2

I’m wanting to know the same question regarding the header image on mobile. It appears it stretches to the full height of the site on mobile, but the full height of the browser window on desktop. Because of that, on mobile, a very, very tiny portion of the image is visible when background: cover is on.

Any fix for this?


#3

Hello,

Custom css code can be applied with simple custom css plugin.

1. Center logo - you can achieve this with custom css code below:

img.site-logo {
    display: block;
    margin: 0 auto;
}

.header-container {
    top: 65%;
}

Inside provided css, there is also slightly adjustment for header text in order to lower it, so it will not overlap logo. Please note that logo will overlap your page content on scroll which can cause unpleasant user experience.

2. HTML cover property - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. This is default behavior and there is no workaround.

Font size of typed text can be changed on touch devices below 768px in width with custom css code below:

@media only screen and (max-width: 768px) {
    .header-container h1 {
        font-size: 24px;
    }
}

3. Header buttons background can be set with custom css code below:

.header-container .button.light {
    background-color: #ffcc00;
}

.header-container .button {
    background-color: #ffcc00;
}

You can change color value to your liking and also you can add other properties like border-color for example.

Within these answers there is also answer to iTim314 question.

Best Regards


#4

So there’s no css that can be applied that scales the header background down to, say, a fixed height when on mobile? This is causing the very first thing that people see to be a zoomed-in portion grainy JPEG on mobile. Its either that, or a background that doesn’t fit on desktop. Either way it doesn’t work well.

Would doing something like the below work?

@media only screen and (max-width: 768px) {
div#header-banner {
max-height: 1000px;
}
}


#5

Added the custom css

@media only screen(max-width: 1024px){
#header-banner {
background-size: 200% 100% !important;
}
}

#header-banner {
background-attachment: scroll !important;
}
}

But it also affects my desktop site. When I add “@media only screen(max-width: 1024px)” above " #header-banner {background-attachment: scroll !important;}" the mobile site does not display as wanted.

Help please!


#6

Hi,

Css that you are mentioning wont do anything, you can reduce header size with following css if you want, but you will also have to re-position typed text further down:

@media only screen and (max-width: 768px) {
    div#header-banner {
    min-height: 80% !important;
    }
}

Default is set as you can predict to 100%, and result should look like this http://screencast.com/t/DedquvEtybfd

You can also try to position background image differently, check following link https://css-tricks.com/almanac/properties/b/background-position/

Best Regards


#7

Hi,

media query have to go like this:

@media only screen and (max-width: 1024px) {
   ...
}

Best Regards


#8

THank you

how do I re-position the text further down?


#9

Hi,

You are already using custom css to re-position entire content with buttons:

@media only screen and (max-width: 768px) {
    .header-container {
        position: relative;
        top:350px;
    }
}

If you want to move only typed text you can use custom css code below:

.header-container > h1 {
top:50px;
}

Value can be set as positive or negative, and you can wrap it with media query if needed.

Best Regards


#10

Let’s ignore the call-to-action buttons and type text for the purpose of fixing this core issue.

I’m not even sure which element I’m trying to edit at this point. Is it div#header-banner or .header-container?

Just to test I tried setting both to background: red; and the image remained. It doesn’t look like my modifications to style.css are doing anything. This is the only thing that’s preventing me from moving on to another theme. :frowning:

Again to restate my issue regarding the header background:

  • On desktop, it’s behavior is fine. It’s the full length and width of the browser and looks great.
  • On mobile, it’s zoomed in VERY closely on one spot and just looks like a solid and unappealing color (grey).

I’ve tried:

@media only screen and (max-width: 1024px) {
div#header-banner { max-height: 500px; }
}

… but that does nothing on either mobile or desktop.

EDIT:

Here’s the site on Desktop,
And on Mobile.


#11

Hello,

Share your page link with us so we can inspect your custom css settings.

Best Regards


#12

Here you go: https://jacobfarmerflute.com (work in progress)


#13

@iTim314
Hello,

We haven’t found your custom css code, from where you have applied it?

You can only re-position background with position-x to show different part of image on mobile, and regarding max-height, it depends on device. For example iPhone 4 will have 480px height, so you should consider using smaller value. This is the code which you can try:

@media screen and (max-width:768px) {
    #header-banner {
        background-position-x: 20% !important;
        min-height: 400px;
    }
}

You have also mentioned setting background color. Well, if element have image, background color will be applied behind it and it will not be shown, if you want to replace image with color you have to use custom code like this one:

@media screen and (max-width:768px) {
    #header-banner {
        background:none;
        background-color: #00cc00;
    }
}

And that is all to it. As explained above, image will be scaled. This is default behavior.

cover property – Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. This is default behavior and there is no workaround.