WordPress.org

Ready to get started?Download WordPress

Forums

Duster responsive theme , things become out of whack on smaller devices. (13 posts)

  1. nccfl1
    Member
    Posted 1 year ago #

    When looking at http://www.lacrosse-lounge.com on a normal sized monitor it looks fairly well but when you view it on devices like the iPad or smaller it becomes vary ugly and not that good looking. The three widgets on the bottom instead of being displayed horizontally become stacked above one another vertically which is very unappealing. Id like for them to stay horizontal and still be nice and readable and visually appealing, but i haven't go a clue on how to do that. I was looking into things like having the widgets in divs and putting heights and width of 100% or in Em's but it really don't know . Id just like those widgets to re-size accordingly, or something along those lines. Any information you can provide or suggestions are very much appreciated and I guess what im looking for are some snippets of codes i need to change or something.

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    You may need to use CSS Media Queries, to define the position on certain elements at certain browser widths.

    Please don't create duplicate threads. My comment was removed from the removal of your duplication thread and I've had to retype it here.

  3. nccfl1
    Member
    Posted 1 year ago #

    sorry about that . Do you know what queries i should use like the code i need to use? Thanks for your help so far I really appreciate it

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    You have this in around line 1877 of style.css

    @media (max-width: 800px)
    #supplementary .widget-area {
     float: none !important;
     margin-right: 0 !important;
     width: auto !important;
    }

    While using a Child Theme's stylesheet, or a Custom CSS Manager plugin, override those styles.
    It looks like you'll have to use !important to override them.
    E.g

    @media (max-width: 800px)
    #supplementary .widget-area {
     float: left !important;
     margin-right: 3.7% !important;
     width: 30.85% !important;
    }

    Use a Browser Inspector Tool for this kind of CSS-specific debugging.

  5. nccfl1
    Member
    Posted 1 year ago #

    ok i really want to do this. Im not quite fimiliar with child theme stylesheets. Ive changed some css and html and stuff before. But are you saying should just go into my style.css and change
    @media (max-width: 800px)
    #supplementary .widget-area {
    float: none !important;
    margin-right: 0 !important;
    width: auto !important;
    }

    to
    @media (max-width: 800px)
    #supplementary .widget-area {
    float: left !important;
    margin-right: 3.7% !important;
    width: 30.85% !important;
    }

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    But are you saying should just go into my style.css and change

    Nope, modifying themes' original files are likely to cause you issues in the future. If you're not familiar with Child Themes, use a Custom CSS Manager plugin. The plugin just allocates an area in the dashboard where you can add (and apply) CSS, without tampering with the theme's files.

  7. nccfl1
    Member
    Posted 1 year ago #

    okay so just add the line
    @media (max-width: 800px)
    #supplementary .widget-area {
    float: left !important;
    margin-right: 3.7% !important;
    width: 30.85% !important;
    }
    in the custom css manager plugin? Thank you for being so patient and helpful!

  8. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Yes, try adding those lines to the section in the dashboard allocated by the Custom CSS Manager plugin.

  9. nccfl1
    Member
    Posted 1 year ago #

    I did it and I dont think I notice a difference, do you see any change ? If so please explain what you saw. Again This is greatly appreciated i cant express that enough

  10. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    the @media query syntax needs another level of brackets; should read:

    @media (max-width: 800px) {
       #supplementary .widget-area {
       float: left !important;
       margin-right: 3.7% !important;
       width: 30.85% !important;
       }
    }

    imho, you will also need to reduce the margin and/or width.

  11. nccfl1
    Member
    Posted 1 year ago #

    what would you suggest i reduce the margin or width to? I wouldnt have a clue but im sure youd know best. Thank you for your help as well!

  12. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I think setting the margin to 2% should work.

    helping with fine tuning formatting is not within the main scope of this forum, so you might want to continue this in a css forum like http://csscreator.com/forum

  13. nccfl1
    Member
    Posted 1 year ago #

    Okay so if you check it out now you'll see that theres not a noticable difference then before. I do really want to thank you for the help though. Im hoping that I can make it just look right when someone views this site on a ipad and stuff like that instead of just having to scroll to see each widget. I want them to resize accordingly when viewing on different screens.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags