Why does my banner button disappear on mobile view after code adjustment?

[ImaniManyfield1]

Hi! So I recently adjusted my code in the debut theme to move my banner button. It looks great on the desktop but disappears when I view it on my mobile phone. This is the code I used

.hero__btn {
position: relative;
top: 200px;
right: -530px;
}

Please help , me get it to show on my mobile view

[LitExtension · Accepted solution]

Hi @ImaniManyfield1,

You need to add code for mobile:

@media only screen and (max-width: 749px) {
	.hero__btn {
		position: relative;
		top: 100px !important;
		right: -20% !important;
	}
}

Hope it helps!

[LitExtension · Accepted solution]

Hi @ImaniManyfield1,

You need to add code for mobile:

@media only screen and (max-width: 749px) {
	.hero__btn {
		position: relative;
		top: 100px !important;
		right: -20% !important;
	}
}

Hope it helps!

[ImaniManyfield1]

Hi! It helped but the button is too big. Anyway to make it smaller. my site is imaniunleashed.com

[LitExtension · Accepted solution]

Hi @ImaniManyfield1,

Please change code:

@media only screen and (max-width: 749px) {
	.hero__btn {
		position: relative;
		top: 100px !important;
		right: -20% !important;
    padding: 5px 10px;
    font-size: 10px;
	}
}

If it helped you solve your issue, please mark it as a solution for me. Thank you and good luck.

[Caidra]

Hi @LitExtension I am on Dawn theme with the same problem but do not have a style.css file. Where can I make these changes? Thanks

[LitExtension]

Hi @Caidra,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.