WordPress.org

Ready to get started?Download WordPress

Forums

Sunspot
Primary div width in mobile view too narrow (75%) (4 posts)

  1. welshdemon
    Member
    Posted 11 months ago #

    Hi.

    The primary div (centre main content) is set to 75% to allow the right sidebar (secondary div) to fit on the right.

    When viewed in small resolution, the right sidebar/widgets are pushed underneath the main content (which is good) but now the primary div being set at 75% means there is 25% blank space on the right of the screen.

    This causes most noticeable problems for bbpress, as avatars etc take up space on the left of the screen, then the topic content is very small width in the middle of the screen, maybe only a couple of words fit per row!

    it goes
    something
    like this
    which
    looks
    quite bad
    and makes
    it
    difficult
    to read

    If anybody has an idea how I could remedy this, it would be of great help.

    Thank you

  2. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

    Could you provide links to a few specific pages where we can see an example of what you mean?

  3. welshdemon
    Member
    Posted 10 months ago #

    If you resize your browser to about 300 pixels you will see what I mean.

    http://robssatellitetv.com/topic/france-2e-2f-reception-april/page/2/#post-7774

    Any post on the forum is the same.

    Thanks.

  4. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

    You may want to try adjusting the relative size of the columns in your CSS for smaller screens.

    You can learn more about using media queries that target certain screen sizes here:

    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Media queries are a simple concept but powerful in practice, and can take some experimentation and testing to get right.

    Don't edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You'll then add your custom CSS in the new stylesheet editor that'll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.