No background image on iphones?

My website is www.kineticinquiry.com

On a PC, I love having the beige background image.

However, on an iPhone or other smart phones, too much of the screen space is taken up with the background image. Is there a way to fix this?

Thanks,

Laura

 

Hello Laura,

Greetings from InkThemes!

Please paste the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 480px){
.main-content {
    margin-left: -19px;
    width: 332px;
}
}

Note: Change numeric value as per the requirement..

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com

 

Unfortunately, that did not work. First, I want to be sure we agree on the issue. There are many devises out there with many different screen sizes. But the Andrina theme only distinguishes between 4 sizes:

1. Full size
2. @media only screen and (min-width: 768px) and (max-width: 960px)
3. @media only screen and (min-width: 480px) and (max-width: 767px)
4. @media only screen and (max-width: 480px)

For many cases, this is not working well. For example, using you demo website, as I shrink the window size, I can create the case where about 1/3 of the window is showing the grey background. Please see the attached screen shot. For small screens, like the iPhone 6S, it has too much grey. The smaller the screen, the more precious the real estate and the less I want to see it being wasted. How do I ensure that less of the screen is grey and more of the screen is showing my valuable content?

Warmly,

Laura

 

Here is another screen shot showing more of IE.

 

Hello,

Would you please try below code for once and check after that..

Code:

@media only screen and (max-width: 960px) and (min-width: 768px){
.main-content {
    width: 891px;
    margin-left: -68px;
}
.feature-content {
    margin: 0 10px 35px 65px;
}
.slider-wrapper {
    margin-left: 50px;
}
}
 
@media only screen and (max-width: 767px) and (min-width: 480px){
.main-content {
    width: 679px;
    margin-left: -102px;
}
.mobile_nav {
    margin-left: 175px;
}
.feature-content {
    margin: 0 20px 35px 93px;
}
}
@media only screen and (max-width: 480px){
.main-content {
    margin-left: -46px;
    width: 380px;
}
.feature-content {
    margin: 0 0 35px 43px;
}
}

Change the numeric value as per the requirement..

Hope it will resolve your issue

Thanks & Regards!
Priyanka
InkThemes.com