[Robertf]

Hi,

I use CatchBox Pro on my blog site, https://www.robertfairhead.com.

When I access the site on my iPhone or my son’s Galaxy s8, the resized, responsive template moves from side-to-side if you hold thumb on it and move it. It does not do this when resized for tablets, small or large.

Obviously, there must be a CSS setting that fixes the resized template and I wondered if you could point me in the right direction?

Please let me know if you need admin access to the theme and its settings.

Regards,
Robertf

[tikaram]

@robertf : Go to Appearance => Customize => Additional css and add the following css.

@media only screen and (max-width: 479px) {
#sidebar-header-right {
	margin-top: 2em !important;
	margin-left: 30px !important;
}
}

Let me know if you need any further assistance.

Regards,
Tikaram

[Robertf]

Thanks, Tikaram. I’ve currently got the following CSS settings for @media screen and (max-width: 479px):

#sidebar-header-right {
width: 90%;
display: flex;
margin-top: 1em !important;
margin-left: 95px !important;
}

I will test your suggestions (margin-top: 2em !important; margin-left: 30px !important;) tomorrow.

Regards, Robertf

[tikaram]

@robertf : Please let me know if I was able to resolve the issue or not.

Regards,
Tikaram

[Robertf]

Hi Tikaram,

Thanks for your following up my support request. I have replaced the following in my CSS:

#sidebar-header-right {
width: 90%;
display: flex;
margin-top: 1em !important;
margin-left: 95px !important;
}

… as per your suggestion with:

#sidebar-header-right {
width: 90%;
margin-top: 2em !important;
margin-left: 30px !important;
}

Big THANKS, this has stopped the side-to-side movement on the website on my iPhone. However, I now have a “floating formatting” problem with the social media icons and Search box. I should be able to sort this out by checking & tweaking the CSS for these elements.

Thanks once again for your assistance.

Regards, Robertf

[tikaram]

@@robertf : Replace

#sidebar-header-right {
width: 90%;
margin-top: 2em !important;
margin-left: 30px !important;
}

with

#sidebar-header-right {
width: 90%;
margin-top: 4em !important;
margin-left: 30px !important;
}

Let me know if you have any further issues.

Regards,
Tikaram

[Robertf]

Hi Tikaram,

I had to do a bit more tweaking of the CSS than planned, as when I made space for one element, it affected another element, etc, etc, but I think I’ve got it looking good enough AND the template is no longer moving from side-to-side on my iPhone.

https://www.robertfairhead.com

Thanks for all your help and sample code.

Regards,
Robertf

[tikaram]

@robertf: Glad to know that the issue has been resolved. Let me know if you have any more issues. Have a Good day.

Regards,
Tikaram

[Author]

Posts