Content dock on mobile is behaving weird

[ricelean]

Hi there, love this theme, the problem is the content dock which I downloaded to house a opt-in form. It shows well on my PC screen. However, on my iphone 6 it completely blocks the screen. And the close button is too high to be seen.

I’ve tried the following codes, none of them seems to be working:

@media (max-width: 767px){
.x-content-dock {
display: block;
max-width: 200px;
}

.x-content-dock .h-widget {
font-size: 20px;
}
}

@media (max-width: 767px) {
.x-content-dock {
display: block ! important;
}
}

I’ve also trie dto change 767 into a far smaller number such as 250. Still no change.

If you could help me solve this problem, I’ll thank you a million times!

[friech]

Hi There,

Thank you for writing in, the reason for that is the text content is getting wrapped resulting in the content dock gaining height to accommodate its contents. To resolve that we can decrease the font-size in mobile view, please add this to Theme Options > CSS

@media (max-width: 767px) {
	.tco-content-dock.tco-content-dock-on {
	    width: calc(440px - 70px) !important;
	}
	.tco-content-dock.tco-content-dock-on p,
	.tco-content-dock.tco-content-dock-on span {
		font-size: small !important;
	}
}

Hope that helps,
Cheers!

[ricelean]

@friech

@media (max-width: 767px) {
.tco-content-dock.tco-content-dock-on {
width: calc(440px - 70px) !important;
}
.tco-content-dock.tco-content-dock-on p,
.tco-content-dock.tco-content-dock-on span {
font-size: small !important;
}
}

Hey there, thank you very much! It’s better now, but still blocking the screen. Any chance we can make the words smaller?

Also, the content dock looks different on my About and Contact pages. On the Contact page, it is way too slim and tall and is cut off. Is there a way to fixe this?

My website is www.ricelean.com in case you need to take a look.

Thanks again!

[ricelean]

By the way, I did test it on iphone 5 and it looks like the content dock appears even though it’s not supposed to be triggered on a small screen.

Anything we can do to fix it?

Thanks.

[Prasant]

Hello @ricelean,

Thanks for updating thread.

Please update the code wherein we have calculated the width with the following and that should fix the issue:

.tco-content-dock.tco-content-dock-on {
    width: calc(392px - 70px) !important;
}

I also checked the About and Contact page and I don’t see any issues with the content dock styling. Can you please confirm again.

In case you want to hide content dock on mobile devices, please add following CSS:

@media only screen and (max-width: 500px) {
    .tco-content-dock {
        display: none;
    }
}

Thanks.