Static slider image background-size:contain for mobile

Hello.

Hi

Insert this in Custom CSS

@media all and (max-width:400px){
#stat_img {background-size: contain !important;}
.stat_content_inner{min-height:auto !important;}
}

Thanks

This is the result https://snag.gy/79MUP.jpg

there is still a bit of gray area where the button is located i think it has something to do with positioning the inner content.

@amrrr this cannot be avoided I am afraid. Where do you want to display the Buy button? under the “Move With Your Heart” text?

Yes @layerthemes i want it to appear below Move with your heart text but that is for the

If you visit website https://cyboard.xyz you will find the button in a suitable place, but on mobile its way down like you’ve seen in https://snag.gy/79MUP.jpg

Looks like i always ask the hard questions lol.

@layerthemes Is there any way to change the color of the grey area?

Hi rhysstewart01

Can you please let us know your site address?

Thanks

Hi @layerthemes,

I have since installed a plugin that contains the static slider image to particular screen widths etc, with no apperance of a grey area. So that seems resolved.

My issue now is that I wish to have the mobile toggle menu appear on larger screen widths by increasing the toggle menu breakpoint

Eg, I would like the toggle menu to appear on a google nexus 7 etc (603×966) instead of the standard menu appearing which dosnt fit correctly on top of the page.

Hope you can help,

Thanks

Hi

If the device width is less the 610px then the hamburger menu will appear.

Insert this custom CSS in Appearance -> Customize -> Miscellaneous -> Custom CSS

@media all and (min-width:610px){
#simple-menu {display: none!important;}
#topmenu {display: block !important;}
}

Let me know if it solves the issue.

Thanks

May you look at https://cyboard.xyz from a mobile device and see that i still have a problem with gray area appearing under the slider image brah?

Hi

Can you please let me know your devices resolution. If you can provide a screenshot, that would really helpful for us to identify the issue.

Thanks

here’s where i test it https://mobiletest.me/iphone_5_emulator

Hi

This is not the actual representation of your mobile version, To get the exact mobile emulation, follow these steps:

1. Open up Chrome and enter your URL
2. Press CTRL + Shift + I
3. Click on the mobile icon
4. Select the device from the drop down
https://imgur.com/BLjxWLW
5. Hit refresh to see the actual mobile representation.

Thanks

Ok @layerthemes that’s information just followed your words and still the gray area is present like this picture https://snag.gy/BdMsQ.jpg