Header image in my layout is normal in full-size desktop layout, but the mobile layout header images are not sizing to full width. I have checked through CSS in Child Theme and have even deleted all to check for issues, but nothing seems to work. I looked through plugins but couldn’t seem to find anything related there either.
Site in question is at http://theexcelsiorhouse.com/staging1
I have used this theme for a few other websites and never had this occur. Please help. Thanks!
Hi Everyone,
I really need help with this. I still cannot figure out why my header image will not resize accordingly with the responsive layout in mobile devices - specifically IOS devices (both iPad and iPhone). I don’t have any idea what the difference is between the header in /* http://www.jeffersonpilgrimage.com / which works just fine, and this staging directory / http://www.theexcelsiorhouse.com/staging1 */
I figured out a workaround, but it is not a clean solution.
I added the following to my child CSS as follows:
/* #site-title a img {
vertical-align: inherit;
max-width: 96%;
}
*/
Not perfect alignment for the iPad, but not noticeable in iphone. What is causing this otherwise normally responsive header to not resize properly in mobile formats?
Hi @ericsarts,
I hope you are well today and thank you for your question.
I visited your staging site and the header image is displaying fine on ipad as shown in the attached screenshot.
Could you please share me the screenshot of issue?
Best Regards,
Movin
Hello Movin,
Thank you so much for your response. I had to do some modification of the CSS in order to prevent the issue from occurring in the /staging1 directory, however, although now resolved, I was getting three different views for three different systems.
The URL I am working with now is at: http://www.theexcelsiorhouse.com/staging2
On the laptop, using Firefox, I was getting the same result as shown in your image above.
You’ll notice that the header image is showing a margin or padding, or is shrunken in size, even though I have set the size to max-width: 100%
(Please pardon the incredibly old operating system.)
I don’t know why this was showing up with this setting, but I had to change the CSS in my child theme to:
/**
.container {
margin: 0 0 0 0 !important;
max-width: 1018px;
}
**/
It now appears correctly, full width of the main content div
It was showing up in the Firefox/Mozilla inspector with a max width of 978px. I had tried to change that previously but that caused other issues with the mobile layout which now seem to be resolved. It seems to be inconsistent with the CSS I used for a different site (http://www.jeffersonpilgrimage.com ). That site never had the same problem and rendered correctly from the start.
Now, using the iPad OS system, the header is actually doing exactly what I want by being full size from margin to margin, and this time it actually works in both vertical and horizontal layouts. The header is now the correct width and reaches edge to edge the same with the main content container. Previously, the header graphic, even as a 1018px x 250px jpg, it was shrinking to nearly half the normal width of the space intended. I do not have a screen shot of that anymore, my apologies.
This is a wonderful theme! I was just having such a difficult time trying to understand where the inconsistency was between a previous site installation and this one. For now it is fixed as far as I can tell.
The child theme CSS I am using is now as follows:
//**
/*
Theme Name: Travelify Child
Template: travelify
Author: Child Theme Configurator
Version: 1.0.1449873385
Updated: 2015-12-11 22:36:25
*/
@charset “UTF-8”;
/Buttons/
.wpi_designer_button_488 {
font-family: “Balthazar” !important;
font-size: 20px !important;
font-weight: 400 !important;
border-width: 1px !important;
border-style: solid !important;
padding: 10px 20px !important;
display: inline-block !important;
color: #FFF !important;
background-color: #826A00 !important;
border-color: #C1B357 !important;
background-image: none !important;
border-radius: 5px !important;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
}
.wpi_designer_button .wpi_designer_button * {
background-color: #CCC;
border: 2px solid #CCC;
text-align: center !important;
color: #333;
line-height: 1.2em !important;
padding: 5px 20px;
transition: all 0.2s ease 0s;
border-radius: 25px;
display: inline-block;
margin-bottom: 10px;
text-decoration: none !important;
vertical-align: top;
display: none;
}
.wpi_designer_button {
text-align: center !important;
color: #333333;
line-height: 1.2em !important;
display: none;
}
/Fonts and Headings/
#site-logo {
float: none;
margin: 0px 0px 0px 0px !important;
}
.hgroup-wrap {
padding: 0 0 0 0 !important;
}
.entry-title, .entry-title a {
letter-spacing: -1px;
font: 700 24px/1.4em “Balthazar”,serif;
text-shadow: 0px 0px 0px !important;
padding-top: 10px;
display: block;
transition: all 0.3s ease-out 0s;
}
h1, h3, h4, h5, h6 {
font-weight: bold;
font: “Balthazar”,serif;
}
.widget-title {
font: 700 18px/20px “Balthazar”,serif;
text-transform: none !important;
}
.entry-content dd {
font: 400 18px/22px"Balthazar",serif;
}
/Navigation Menu/
#main-nav a {
font-family: “Balthazar”;
font-size: 18px;
font-weight: bold;
letter-spacing: -0.5px;
height: 24px;
padding: 10px 10px 10px 10px;
}
#main-nav ul li ul li a, #main-nav ul li.current-menu-item ul li a, #main-nav ul li ul li.current-menu-item a, #main-nav ul li.current_page_ancestor ul li a, #main-nav ul li.current-menu-ancestor ul li a, #main-nav ul li.current_page_item ul li a {
float: none;
line-height: 21px;
font-size: 18px;
font-weight: bold;
height: 100%;
padding: 6px 10px;
color: #826a00;
text-transform: none;
background: #FFF none repeat scroll 0% 0%;
border: medium none;
}
/Backgrounds and Wrappers/
.wrapper {
background-color: rgba(50, 50, 50, 0.5) !important;
}
/*Header Branding and Social Media Top Bar */
.container {
margin: 0 0 0 0 !important;
max-width: 1018px;
}
#branding {
margin-top: 0px;
}
.header-image {
width: 100%;
height: 100%;
}
#site-title a img {
vertical-align: none;
max-width: 100%;
max-height: 100%
}
**//
Thanks again so very much for responding. If you know of any reason why there would have been a maximum width set for 978 pixels when the theme clearly states to use graphic images at 1018px, please let me know.
Best regards,
Eric
Eric S. Arts
CEO, Consultant – GTR Incorporated
Brand Development and Management Strategies,
Business Development
972.467.0431 mobile
[email protected]
It seems you are facing the issue because you are trying to use logo image as Header Image on your site.
Please see the difference between two images in the attached screenshot.
If you set the header image on your site on the following path then you will not get any issue with the image width.
Admin Area -> Appearance -> Customize -> Header Image
I’m having a problem with my site. www.thebirdsnestcafe.uk - I have set the header image, uploaded, saved and published… however it will not show on my site.
can you help?
@zakhammond To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/travelify-support/ instead of replying on others thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you on your new thread.