Hi there,
Thanks for writing in,
The images you’ve posted on your website’s Bootstrap slider are all 1200 x 450 as required as you stated in your details but if you see them with a closer look they are not fully width spread images as there is some white space on the sides of each image as per shown into these two snapshots that I’ve provided down below.
1. http://prntscr.com/74rrp7
2. http://prntscr.com/74rtp7
As you can see that images are not fully wide so I’ll recommend you to set up fully wide images and there should not be any white empty space around images.
And after being tested on all mobile devices displays images are perfectly running well except that empty space which is around faulty images and I need you to get compatible fully wide images for Bootstrap slider.
http://prntscr.com/74rvb9
Hope this helps!
Thanks.
Hey Mate,
Thanks for the reply. I was talking about the Header image, not the bootstrap slider.
I spent last night trying to fix that but I ended up removing since I couldn’t fix it.
I just put it back online so you can check it out.
Hi there,
There wasn’t any image placed on your website header so I couldn’t find a bug into your setup and now I’ve looked up into it and found a solution for that you may need to resolve in by custom CSS changes.
I’d require you to use a code given and after looking up into the website back end there is no issue with header image on mobile devices and any screen sizes as you stated which gets disappeared. No issue at our end as per shown into the screenshot below:
http://prntscr.com/74sy0q
To resolve the image zoom which is actually not exactly a zoom but caused by some padding cancellation.
Go to the: Administration > Appearance > Theme Options > Custom CSS and insert the following code inside:
.header {
padding: 25px 0px !important;
}
Hope this helps!
Thanks.
Thanks for the help again, but it didn’t work.
Your code added a empty space above my image.
So, let me try to explain again:
This is the image I want to post as my header image:
http://prntscr.com/74zir9
This is what it looks when I set this image as my header image:
http://prntscr.com/74zimd (it crops the bottom part of my original image)
After using your css code, it added a empty space above and under the image, and still shows the same problem:
http://prntscr.com/74zj3v
Thanks for your input! hope to hear from you soon
newer version of evolve is submitted for review here https://wordpress.org/themes/download/evolve.3.3.0.zip?nostats=1 we added an option to set header’s height, it might help you in this case
Hi there,
Thanks for writing in,
As you stated “I just put it back online so you can check it out” by the time we didn’t catch the actual header image but only the title of header as for the proof of given below screenshot where is no header image so we weren’t suppose to identify the issue undoubtedly.
http://prntscr.com/74sy0q
You can try as Roman mentioned the newer version of evolve is having height of header option and this is also doable by custom CSS method. Depends on you for which one you go.
Thanks.
Ok, I added the updated version and with the option to set the
header image height everything is fixed now!!
Thanks a lot guys!
I’m actually having a similar issue. I have a header with a size of 1200×125. It looks great on desktop computers, etc. However, when being viewed on a mobile device, the header is cut off quote considerably. I have tried every option via the Theme options. I have changed it from ‘Cover’ to ‘Contain’ under the style option, and while it does shrink the whole image down and shows it all with the Contain selected, it leaves a blank space right below it. To understand, visit http://www.prideagace.com from a desktop then from a mobile phone device. Is there a technique or some code I can use to fix this issue? Please let me know.
Thanks!
Braden
I am having a similar issue. I don’t mind the white space under the header via mobile so much, but I want to get rid of the white space on either side of the header image. The theme made me crop the image (no “skip cropping” option like there often is), otherwise it would have been fine — kerriontheprairies.com
Apparently just posting here fixed issue 1… “cover” worked this time without cutting off text. Interesting.
Braden – hope your issue is resolved soon!
Hi Braden,
Thanks for writing in,
Would you mind confirming us with the exact issue you are suffering from. After taking a deep look into your problem it seems to be related with your header image which is seems to be not supportable responsiveness clearly as shown into this picture which is chopped off on smaller screen size:
http://prntscr.com/75fuup
After putting another image on your header seemed fine in look. Secondly provide more clarification about your issue and you are using jpeg the image I put there for testing was in the png format.
Thanks.
Hi emranemranx,
The issue I’m having is the whole header does not show up on a mobile device. Here is the link to the whole image: http://www.prideagace.com/wp-content/uploads/2015/04/Header3.jpg. It works fine viewing just the link, but as you can see on the website itself, it cuts off right at the ACE Hardware box (illustrated in your posted image). I am needing to have it display the entire header. If I change the style to ‘Contain’, it does end up showing the full header; however, there is a space between the main menu and the header on the mobile device. Does that make sense?
Hi Braden,
Upon checking I discovered it exact as what you mentioned and to fix that to allow the full header image to be viewed there is a way to sort this out you can add following code under Appearance > Theme Options > Custom CSS:
.custom-header {
background-size: 100% 100% !important;
}
Hope this helps!
Thanks.
Hi emranemranx,
Thank you for getting back with me. It seems to have allowed the entire image to show, but now it simply “squishes” the header in rather than just shrinking the header image to the proper size. I have the size of the image set at 1200×125. I tried making the header image bigger to the recommended 1200×170, but the same problems occur. If I remove the second 100% in the code, it won’t re-size the height, but it leaves a big gap between the header image and the menu directly below it. I went ahead and kept your code in (minus the second 100%) so you could see the space problem firsthand. So please visit http://www.prideagace.com on a mobile device to see my header problem. Any ideas on how to remove the gap?
