Problems with mobile layout

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #4724
    Yipityipit
    Member

    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

    #4727
    Yipityipit
    Member
    This reply has been marked as private.
    #4738
    RaghavendraRaghavendra
    Moderator

    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.

    #4749
    Yipityipit
    Member

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

    Thanks again man!

    #4751
    NexusNexus
    Moderator

    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.

    #4754
    Yipityipit
    Member

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

    Thanks!

    #4755
    Livemeshlivemesh
    Keymaster

    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;
    }
    }
    
    #4759
    Yipityipit
    Member

    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!

    #4768
    Yipityipit
    Member

    It’s all fixed 🙂

    #4779
    NexusNexus
    Moderator

    Glad to hear that 🙂

    #4946
    Yipityipit
    Member

    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!

    #4979
    RaghavendraRaghavendra
    Moderator

    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.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘Agile Theme Support’ is closed to new topics and replies.