Hi guys, I have a big problem with my illdy theme. My Jumbotron image does not look right on mobile phones. It looks perfect on desktop and tablet, but when it comes to the phone it is not working. Is there some setting or something I can do to get it looking right?
Thanks
Bill
Sorry forgot to add, my site is www.billdowpmp.com and I just can’t seem to get the main image to work on a phone. My size is correct, but it won’t do it. 
Hello @billdow,
Please use this CSS code to get a full-width behaviour on mobile screens:
@media (max-width: 768px) {
#header {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
}
}
The above code should be placed in a child’s theme stylesheet.css, ideally.
But you can use a Custom CSS plugin or place it inside Dashboard > Appearances > Editor > Style.css but keep in mind that this will get erased if you update the theme.
Let me know if this is what you were looking for.
Regards
Hi. Thank you for your response. I’ve done this in my site and it worked but unfortunately there is a huge whitespace that shows up under the jumbotron and the title moves down there too. Could you please help me get the jumbotron titles right for mobile? The site is www.itai.com.ar
Your assistance is greatly appreciated.
Hello Pipo,
You could use this CSS to handle the spacing:
@media (max-width: 768px){
#header .bottom-header{
padding-top: 5%;
padding-bottom: 5%;
}}
It seems like you might have some malfunction on the smallest mobile viewport with this custom code, so I’d recommend too try this additionally:
@media (max-width: 479px) {
#header {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
Regards
I copied the code and pasted it to Appearance > Editor > Stylesheet
Finally it looked like this. It didn’t work so it deleted the code but now it is all messed up. No other changes were made. Site - http://doorbeam.com/
/*
Theme Name: Illdy
Theme URI: Illdy - Free One Page WordPress Business Theme - Colorlib
Author: Colorlib
Author URI: https://colorlib.com
Description: Illdy is a free premium one page WordPress theme.
Version: 1.0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: illdy
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/
@media (max-width: 768px) {
#header {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
}
}
Hello @himanshu,
Please create a dedicated forum post for your issue and provide screenshots of the malfunctions as I’m having some issues to locate it.
Regards
Hi!
I also have the theme Illdy, and it looks awesome on the computer or on a tablet. But when it comes to the mobile version the picture in the Jumbotrone Section looks very strange. The picture gets very narrow and long. I would like the picture to be shorter, if it is possible to change with css? (I want the distance to the text to be shorter)
Here’s the website:
Thank ou so much for your help! 
(And also: I tried to start a new topic regarding this… but where do I do that?)
Maria
Hello @mericsson88,
We are right in the middle of the process to improve the header responsive issues, so until this hits the shelves via a theme update please use this CSS solution I previously used to improve the mobile behaviour of the theme.
.front-page-section .section-header h3 {
line-height: 1.5;
}
@media (max-width: 1600px) {
#header .bottom-header {
padding-top: 100px;
padding-bottom: 100px;
}
}
@media (max-width: 1024px) {
#header .bottom-header h2 {
font-size: 40px;
}
}
@media (max-width: 767px) {
.top-header .col-sm-2 {
display: inline;
}
#header .bottom-header .header-button-two {
padding: 0 10px;
}
.top-header .col-sm-10 {
display: inline;
float: right;
clear: both;
}
#header .bottom-header .header-button-two {
font-size: 16px;
}
.custom-logo {
width: 200px;
height: auto;
}
}
@media (max-width: 320px) {
.custom-logo {
width: 100px;
height: auto;
}
#header .bottom-header .header-button-two {
font-size: 12px;
}
}
Regards
Hello,
I have the same issue described above, but neither solutions work for me. Both the jumbotron pic and header pic are not responsive on mobile or tablet devices.
Is there a fix for this issue?
Thank you!
Hello Rachel,
I see the header image displaying just alright on smaller views, can you please provide me a couple of screenshots of what you’re seeing and what it’s supposed to look?
Kind regards
Hi Ion,
Thanks so much for your response. I attached screenshots from a mobile device of the jumbotron page and another page with a pic in the header. The images are very zoomed in with poor resolution. It looks this way on iPads, as well.
I also attached images showing what it is supposed to look like on a mobile device, according to the “mobile view” shown in the customizer. Essentially, I would like the image on mobile to look the same as it does on a smaller desktop view and would like to keep it from compromising the resolution.
Thank you for your help!
Best,
Rachel
Hello Rachel,
Thank you very much for the details so far!
I’m still doing my best to get my head around this because I cannot replicate the behavior so far.
I will try better and get to you with more information the least possible time.
Kind regards
Same issue. On the desktop, jumbotron pic is great, phone, no good. Same results in Chrome & Safari so I know it’s not a browser issue for the phone. I tried the code you specified on May 30, 2016 at 12:17 pm and also September 11, 2016 at 5:07 pm. Neither worked for me. The code from Sept 11 is still active in style.css www.CalvaryChapel.ug
I checked out www.Studio210Salon.com on my iphone 6s and I’m seeing the same problem; the same as her screen shots posted.
This is quite a strange issue so I will start an investigation in the shortest time and keep you posted about the progress.
Sorry for the trouble!
Regards
Please keep me informed as to when this issue can be solved, as I have experienced the same.
Thank you
Hello,
Hopefully, we’ll get more information and a fix for this in the upcoming theme update, but I cannot give you an exact date for it.
Keep an eye after it and I’ll keep you all posted about it.
Best regards
I have same issue at http://www.storsquare.com - even in admin panel the responsive site looks good but on my actual iPhone 6 the front page image scales completely wrong.
IMG_2477 is my actual phone
IMG_2478 is mobile view on website (the way I want actual mobile view to show)
Yeah, my www.billdowpmp.com still not working on my IPhone sadly.
Would love to see a fix soon.
Bill