WordPress.org

Ready to get started?Download WordPress

Forums

Pachyderm
[resolved] Layout changes in Mobile Browsers (9 posts)

  1. lavender-bliss
    Member
    Posted 1 year ago #

    I just want to ask how to disable or edit this feature. Every time I add padding and margins, the layout would look like a mess on mobile. It especially affected the post-images alignment.

    I appreciate every help. Thanks

  2. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    Yes, you can use CSS in a child theme or a CSS plugin (like Jetpack) to do this. I recommend using Firebug for CSS work--makes it much easier.

    Media queries control the mobile layout -- you can find them at the end of style.css, look for something like @media only screen and (max-width: 1024px) So if you adjust the padding elsewhere in the theme, you can add the same media queries to your custom CSS plugin or child theme and adjust the padding there to fix any weirdness.

  3. lavender-bliss
    Member
    Posted 1 year ago #

    Since I am not a code geek, I would rather have this disable. Where can I find the code to disable the media queries?

    I'm really sorry but if I can't make the entries expand 100% then I'll just disable it.

  4. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    If you post a URL we might be able to help with the problem -- it's not clear from your post what you're trying to fix.

    But if you want to disable them, like I said in my previous post, you'll find them at the end of style.css (the section is labeled "Media Queries for Responsive Layout").

    If you do remove the code, remember to remove it each time you update the theme -- the media queries will return with each update. There's no easy to way to disable them in a child theme without going through each section line-by-line and reversing/resetting its properties.

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    When customising themes beyond the options available in the dashboard, it generally involves coding. If you can't manage customisations yourself, consider hiring someone at http://jobs.wordpress.net .

  6. jamesg40
    Member
    Posted 1 year ago #

    Looks like she is trying to remove the media queries, so to do this... simply open the style.css in a text editor like Notepad++ or something similar and scroll down to where the media queries start and simply delete them. If the theme author coded the css well then the theme will retain its base form on all screens, It will simply get to small to read easily when viewed on a mobile screen but will look exactly like it did on the larger screens.

  7. lavender-bliss
    Member
    Posted 1 year ago #

    Thank you all for the reply and I'm sorry. I thought there's an easy fix. I tried re-sizing the max and min width and also tried to delete the whole media code yet it still shows like this on mobile full screen.

    http://i45.tinypic.com/2vjvjmv.png

  8. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    Hmm, my guess is it's not the theme but the fact that the mobile browser is accounting for the photo(s) in the content, which are wider than the given content area.

    But I can't tell you for sure without seeing the theme in action on a live site.

  9. lavender-bliss
    Member
    Posted 1 year ago #

    I found the answer. It's the meta viewport found in the header.php.
    <meta name="viewport" content="width=device-width" />

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.