Docs

[bdurphey]

Hello,

Just recently I noticed that my entire website is not responsive on mobile devices. The headers, photos, and text all look disproportioned. Unfortunately, I don’t know how to resolve it from the backend without causing issues to the desktop version of the site.

Thank you in advance!

[bdurphey]

This reply has been marked as private.

[Christopher]

Hi there,

Please provide us with some screen shots as it looks fine on my end.

Thanks.

[bdurphey]

Hello Christopher,

Please see the attached photos, I’d like my mobile responsiveness to look more like the image I’ve attached from Pace Creative Design.

[bdurphey]

Reattaching the other files

[Rupok]

Hi there,

Thanks for the screenshots. Those are not responsive because you broke them with custom CSS. For example, for the slider you have added :

.home div#x-section-1 {
  padding: 35.5% 10px !important;
}

Which is adding lot of padding hence doesn’t look good on mobile. You can add this CSS within media query so that it won’t interfere with mobile :

@media only screen and (min-width: 980px) {
.home div#x-section-1 {
  padding: 35.5% 10px !important;
}
}

Hope this makes sense.

[bdurphey]

Sorry, where exactly do I place this code. And will it adjust the other headers on the other pages?

[Rupok]

Hi there,

I am not sure where you have placed the code I mentioned. You should know better; maybe under Customizer > Custom > CSS or within Slider Custom CSS. You need to adjust your existing code so need to find that.

Thanks!

[bdurphey]

Hello Again,

This doesn’t seem to be rectifying the problem either. What am I doing wrong? I’ve tried to add this under the custom css section.

[Friech]

Hi There,

Sorry for the confusion, but would you mind to clarify the issues first?

Your site looks very responsive on my end. Images and Headline are not cutting off or disproportioned, paragraph text are aligning properly.

http://prnt.sc/cbynnz
http://prnt.sc/cbynzj

The issue that I am seeing is the white gap above and below your page some kind of banner. That white gap is cause by the huge margin and a large padding you applied on the ROW. http://prnt.sc/cbyn0b

That is the case on your “home”, “services”, “contact” and “about” page.

Try to reduce that large margin and padding to resolve that white gap issue.

And where is this section located? https://s3.amazonaws.com/community-themeco/app/uploads/2016/08/23090633/image4.png

I am not seeing that section on your home page.

We’ll be happy to provide you with a better response once we have a better understanding of the situation.

Thanks.

[bdurphey]

Hello Friech,

Thank you for the quick follow-up and clear and concise directions.

I just tried to reduce the padding & margin, but I don’t get the same effect, it looks as there is no trim around the top portion of the page headers. Is there a way to achieve the same look but still fix how it looks on a mobile device?

Finally, the last link I attached from Pace was the look I was hoping to attain from a mobile side.

Thank you in advance.

[Friech]

Hi There,

I’m sorry but that screenshot does not explain much. I am seeing a lot of static padding/margin on the sections and rows which is contributing to those gaps, we can offset that with a custom CSS but it is not very efficient.

For example replace this css code on your customizer:

@media only screen and (min-width: 980px) {
.home div#x-section-1 {
  padding: 35.5% 10px !important;
}

With this:

@media (max-width:  480px) {
	div#x-section-1, div#x-section-1 .x-container {
	padding: 1% !important;
	margin-top: 1% !important;
	}
	div#x-section-1 .x-container hr {margin-top: 0;}
}

This will reduce the top and bottom space of every first section of your pages, but Im not sure if this really the layout your want to achieve.

Some of this first section will still have a huge gap bottom because of the second section’s margin or padding, so we need to write another CSS for that. That’s what I mean not very efficient.

If this does not work, we advice that you keep the default margins and paddings on the sections and rows. And then add a class to this sections (e.g. mysection). This way we can control the space of this sections easily on mobile or on desktop.

Then let us know how do you want this section to look on desktop and how on mobile. A mock-up design would be appreciated.

Thank you.

[Author]

Posts