Problems with mobile layout

[yipit]

HI there,

I have a couple of questions and I was really hoping you could help me out. I’m making a wordpress site (www.etonglory.nl) using your agile theme. I needed to use margin-left and margin-right to make sure the text is aligned in the center. But, if you go to the website on a mobile device, the text is aligned dead-center. I tried fixing that with:

@media all and (max-width: 768px) {
#h3 {
margin-left: 0px;
margin-right: 0px;
}
}

@media all and (max-width: 768px) {
#h4 {
margin-left: 0px;
margin-right: 0px; } }

@media all and (max-width: 768px) {
#h6 {
margin-left: 0px;
margin-right:0px;
}
}

In the custom css, but to no avail.

Another problem I’m having is, when visited on a mobile device, their a pretty big whitespace next to the page.

I’ve added two screenshots in which the problem is seen.

I really hope you can help me!

Thanks a lot in advance,

Jelmer

[yipit]

This reply has been marked as private.

[Raghavendra]

The text issue is resolved. Your CSS was right but had a # for the selector which I had to remove. For the scrollbar, I see that you have a contact form created with contact form 7 which is causing most of it. I have an update released this week which has an example of responsive contact form. Of course, you will need to load the latest version of the theme to use that form effectively. Can you try updating.

Also, any customizations you make, I would urge you to do them either in the child theme or custom/custom.css file. That way if you need to update the theme later, things will be easier for you. Hope this helps.

[yipit]

Thanks! How do I update? Just download the theme from themeforest and install it again?

Thanks again man!

[Nexus]

The way I update is to replace all files. No matter what method you use (there are plugins too like this – http://wordpress.org/plugins/easy-theme-and-plugin-upgrades/ to update easily), you will need to backup your changes and redo any changes you made to the files on the new installation.

Use tools like DiffMerge or WinMerge to compare the old and new files and redo the changes. You will spend probably an hour doing this but not more, specially if you have made changes only to a few select files. The settings data will stay and hence Custom CSS entered into theme options should be fine. It’s always a good idea to have a backup though. Hope this helps.

[yipit]

Thanks, I upgraded the theme, but I broke the css you changed. Could you show me what you changed?

Thanks!

[livemesh]

Here is the Custom CSS (just removed the # before heading tags as meteorite said earlier) –

@media all and (max-width: 768px) {
h3 {
margin-left: 0px;
margin-right: 0px;
}
}

@media all and (max-width: 768px) {
h4 {
margin-left: 0px;
margin-right: 0px; } }

@media all and (max-width: 768px) {
h6 {
margin-left: 0px;
margin-right:0px;
}
}

[yipit]

Thanks a lot, but unfortunately it still doesn’t work. It put the css code in the custom css
stylesheet. Somehow, it worked before I updated the theme.

Also, there is still some white space next to the content.

Could you help me out? It’s really appreciated!

Thanks in advance!

[yipit]

It’s all fixed 🙂

[Nexus]

Glad to hear that 🙂

[yipit]

Alright, so it almost sorted out. Because of particular requirements from my client on the desktop site, the mobile site is not displayed fully correct. I used so element styling on the desktop site, but it messes with the mobile view. For instance: a page section is overlapping another page section. Is there a way to fix it? Maybe reset all element style on mobile screens?

Any help is greatly appreciated!

Thanks in advance!

[Raghavendra]

I saw that the contact section was the one which was overlapping. And the style given to the segment was

style="margin-bottom:  -100px; margin-top: -100px; "

If you change the margin values to positive values, the overlap does not occur. Negative margin essentially pushes the element up to previous element. If you have customized the code for desktop, pls use CSS3 media queries to customize the site for mobile devices.

[Author]

Posts