Visual theme: Header image size incorrect
-
To address my site’s speed when loading on mobile devices, I’ve reduced my Header image from about 3MB to about 105KB but also cropped down to 1020px long edge as per WP instructions. However, my image now displays shorter than the width of my posts in my Home and actual Post pages.
I would like to extend the image width to that of the light grey (outside actual thumbnails) in my Home page but also all other pages. Do I now need to resize my image again to longer than 1020px or can I do something in CSS?
The blog I need help with is: (visible only to logged in users)
-
Hi there, try the following CSS which takes the header image to 100% of the container it is in (parent element).
.site-header img { width: 100% } -
-
Just checked this in the Dashboard on mobile devices. I noticed that for a phone device, clicking the Hamburger menu, doesn’t display the menu’s options. Any ideas why?
-
Is it possible to move the logo to the left? I need to add one more item in the primary menu.
Is it possible to change the header´s color without chasing the entire page?
-
Hmmm, not sure what in your custom CSS is causing that, but this doesn’t happen on the demo site for Visual. Let’s add the following to the very bottom of your custom CSS, which will fix the issue.
.menu-destinations-container { position: relative; z-index: 1; } -
Thank you but that code didn’t work.
It’s weird as when I click the 2 mobile device icons in the Dashboard to display what each will look like on those devices, the Hamburger menu displays for a phone and the menu is totally missing for an iPad. However, viewing my site on a physical phone, the Menu is a list not a Hamburger icon. And for an iPad, the menu displays the same as on a PC; at least there’s something there.
This is code I have with regards to all menus from start to finish of CSS but other code in-between:
.navigation-main a {
padding: 1em 20px;
}.navigation-main ul ul {
top: 3.5em;
}.navigation-main {
border-right: none;
float: right;
}.navigation-main li:last-child {
border-right: none;
}.menu-destinations-container {
background: #383838;
}
.navigation-main ul ul ul li a {
padding: 10px 20px;
}and now your code:
.menu-destinations-container {
position: relative;
z-index: 1;
} -
Ah, I just checked and you have the mobile theme activated on your site. Since Visual is a responsive designed theme, you do not need the mobile theme. Go to Appearance > Mobile in your admin dashboard and disable it and then visit your site. The code I gave is for the responsive theme.
I checked your site on my iPad and iPhone 6s Plus and on both, in landscape and portrait orientations, and the menu appears as it should for me when I click on the “view full site” link at the bottom of your page so that I’m seeing the responsive site instead of the dedicated mobile site.
With Visual, the menu does not change to the touch device menu until 600px width and below, so that is narrower than an iPad.
-
Right, I turned that on when I first started with WordPress.
Thanks again, that worked, and thank you for the extra information! :)
-
- The topic ‘Visual theme: Header image size incorrect’ is closed to new replies.
WordPress.com Forums 