Theme not Responsive on iPad/iPhone

Anyone

Hi,

Please share the website URL.

Thanks

https://www.thesocketroll.com

Basically, on a phone or tablet the “Get Yours Now” button does not show up, the menu is in the form of a drop down which is not responsive and the color is off and the other pages, the text, is not where it should be.

Thanks.

Have you considered adding an

@media screen and (max-width: 300px) {
    body {
                    font-size: 1.5vh;
/* ^You could set the ^ font size to change in relation to the screens size (the measurements of the size change are 'vh' ( visual devices height) */
/* Your code here*/
            }
}

to the css editor ( which you can get access to through the jetpack plugin )?

I’m kind of new so this might not be what you’re talking about, but altering your code so it will fit the screen of the device that is accessing the site is the first thing I would do.

It sounds like your text that is disappearing might have an overflow property that is ‘overflow:hidden’ and thus anything that goes outside of the box size set will just disappear as opposed to rendering outside the elements box.

anyway I hope that helps.

Hi,

Did the above work for you.

Thanks

I did not. Any other suggestions or css code?

Hello,

You can use this to fix menu

.navbar-nav {
    height: auto;
}

so it stays full height on mobile

and this

@media only screen and (min-width: 200px) and (max-width: 480px) {

.carousel-text .enigma_blog_read_btn {
    display: block;
}

}

@media only screen and (min-width: 767px) and (max-width: 992px) {
	.carousel-text .enigma_blog_read_btn {
	    display: inline-block;
	}
}

@media only screen and (max-width: 767px) and (min-width: 480px) {
    .carousel-text .enigma_blog_read_btn {
	    display: inline-block;
    }

}

to show you button always

@nemanjac : Thanks …

@cayindustries : Use Child-Theme for Modifying the codes.

Thanks

I tried the above code and I get the “Get Yours Now” button, but the text and pictures are all tweaked and out of size. Any way to fix this issue?

Hi,

Write below CSS rules into custom CSS editor:

.carousel-text .enigma_blog_read_btn {
font-size: 16px;
color: #fff !important;
}

Save the changes.

Note : You can change your font-size and color code according your requiremens.

Thanks

This just changes the color of the button. Please read the above and check out the website on a mobile device and then advise please. Thanks.