Homepage is not displaying correctly on mobile version

Illdy
1

I’m using the Illdy theme for creating a photography website. While viewing from my main computer the website is looking good. but I’m having problems with the homepage not being displayed correctly when viewing from my cellphone. I think the problem is with the jumbotron. While customizing the page, i noticed that if i view using the mobile version option, the page looks ok. but on my cellphone its not right. The menu bar invisible and the jumbotron title is missing half of the letters.

Another problem that noticed was with my “Bio” section on the homepage. Somehow i got a picture set for the Bio background and was unable to remove that background so i completely disabled the bio section.

I’m curious if the homepage problem can be fixed easily or if there is a better theme i should use for a photography website

knk-photography.com

2

Hey there,
Hope you’re doing well today

The main problem here is that you set your background to contain instead of cover and that ensures that the image does not cover the full width and height of the header, instead, it takes up only the center portion of the jumbotron, and since the text and the menu are white, you’re unable to see it on the white background that sits behind it.

If you could replace the logo with a white version and remove the code below, you’ll have everything showing correctly:

#header.header-front-page {
    background-size: contain !important;
}

I hope this helps :slight_smile:

Best Regards,
Support

3

Hi,

I have illdy running on my website too. The Jumbotron Picture is huge when viewing the website on my smartphone. I couldn’t find where the above code is? here is my website durihub.com

4

Hey there,
Hope you’re doing well today

The issue you’re having is with the size of your image. I’m seeing where this an issue for a number of other customers, and its actually pretty much the same on the demo site as well. With that said, I think it may be something related to the theme that may need some tweaking, so you could propose this at the link below:

For the moment, I’m seeing where your image is really wide, but not tall enough to provide enough height wise scaling, so I’d advise that you use an image with about 4:3 aspect ratio.

I hope this helps :slight_smile:

Best Regards,
Support

5

Hi. i changed the ratio of the picture to 4:3 and I got the same ,large picture result.

6

Hi there,
Thanks for keeping in touch with us.

Okay, sorry about that. I guess the best bet right now would be reporting the issue in the GitHub so that our development team can consider some ideas for handling images in the Jumbotron a little bit better.

They’ll provide you with either a patch or will include this in plans for the next update.

Best Regards,
Support

7

I do beleive i got this issue fixed. I think the solution was when I switched the jumbotron settings/background/fill screen. Im am now curious about removing the sidebar for my ecommerce store page. I will start a new thread

8

i tried that too but i got the same result

9

Hello there. I want to thank you for this wonderful theme. I have installed on my site but i have some problems with the mobile side. I have read all the responses on the support forum regarding this issue but i was not able to find a solution

When i tried to visit my website: www.kisharilindja.al throught my Samsung S7 i noticed that:

1- All the images on the pages including the jumbotron image are not responsive
2- also the font of the title of the page are not responsive. the font of the text into the page is ok
3-i have created menu and submenu. when i open them from the pc is ok ( submenu are below with a click into the little arrow), but in the smartphone, i can see all the menu

Any Help Please

10

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

@media(max-width:550px){
#header.header-front-page {
    background-image: url(http://www.kisharilindja.al/wp-content/uploads/2017/05/jacob-meyer-32136.jpg) !important;
    height: 475px!important;
    background-position-x: right!Important;
}}

@media(max-width:550px){
.bottom-header .col-sm-12 {
    margin-top: -230px!Important;
}}

@media(max-width:550px){
#header .bottom-header h1 {
    font-size: 50px;
}}

I hope this helps :slight_smile:

Best Regards,
Support

11

Thank You. It’s much better but the menu now is bigger and when i go to different pages the button of the menu is there but i can’t click on it

12

Hello,

I really enjoy the Illdy theme it looks best on the desktop but I’m having some sizing issues when it’s transferred to mobile and that’s any mobile display or even tablet display. The footer won’t display any of the widgets I have either for the mobile version either. My website is unhappybanana.com

I’ve enclosed the pics of this.

thank you again,
Eros