Mobile version of site column and image issue

Support
#1

I am having an issue with one page on the mobile site where an image is showing fine on the preview section of pro but on a device the image and different columns are showing extremely narrow. Any thought on how to remedy?

http://837.934.myftpupload.com/about/

#2

Hi there,

Would you mind providing the login details to your site in a Secure Note so that we can check?

Thank you.

#3

Hello There,

Thanks for providing the information. I have noticed a few things:
1.) Please do not use <p> tag inside a custom headline. It is not valid and might break some spacing. If you just want to display a paragraph, please use a text element.

2.) Your empty section created an issue. Adding a row and an empty column will resolved the issue.

3.) The orange color is because of your section border.

Hope this helps. Please let us know how it goes.

#4

Excellent! last issue seems to be Content Dock in mobile on front page is not honoring the screen size. It extends to the left of the screen. any fixes for that?

#5

Sorry, also on mobile the header logo looks fine when building but it pops out of the header container and doesn’t seem to be resizing correctly. Sorry i am getting used to the Pro Headers and Footers but love them!

#6

Hello Again,

Thanks for updating in!

1.) Your content dock is wider than the screen size for smaller screen. To resolve your issue, please reduce the width of the content dock to at least 420 pixels or less.

2.) Please edit your header and align the logo to the center. You will need to check the flex layout and self flex option.

Hope this helps.

#7

Set to 400 and still blowing out left side. Had to take it to 350 to show properly on iPhone x. no way to have it responsive and still keep the proper size on desktop? That would be ideal to have a desktop size and mobile separate

#8

Hi There,

First, please address the missing closing bracket [ } ] on the last @media query block on your Theme Options > CSS. Else any custom CSS you add will not work.

Then you can add this custom CSS:

@media (max-width: 767px) {
	.tco-content-dock {
		width: calc(100vw - 40px) !important;
	}
}

What it does is to make your content dock respond to the width of the container (minus position/padding) on mobile view (767px & below), but keep the normal width on desktop view.

Hope it helps,
Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.