Broadsheet theme mobile view problem

alexnorman73 · Member · Mar 20, 2015 at 3:09 pm
Copy link

Add topic to favorites
Hi there

My post summaries are showing up on only the left side of the screen on mobile devices. I’m using the Broadsheet theme.

Any advice on how to make the post summaries fill the space properly would be appreciated.

The blog I need help with is: (visible only to logged in users)
jsmutek · Member · Mar 20, 2015 at 3:34 pm
Copy link
Hi Alex,

there’s a super specific style declaration in your style sheet that is setting the width of your post summaries.

body.blog.themes-sidebar3-inactive.themes-category-summaries-active.themes-sidebar1-active .main-post-list

That’s the super specific declaration, above.

You can get by that by either using the same declaration, or using the !important declaration. !important is sort of the H-Bomb of CSS and will work on pretty much anything except inline styles.

It’s not best practice to use !important, but for the sake of simplicity sake I opted to use the !important declaration here. If should be fine.
```
/* Set main post list to width 100% on screens sized 768px or less */

@media (max-width: 749px) {

  /* !important declaration used to overrdie super specific CSS in another stylesheet */
  .main-post-list {width: 100% !important;}
}
```
All this is doing is setting a media query which only applies when the screen size is 749 pixels, or less. (749 pixels is the point where your sidebar drops to the bottom, leaving the empty space to the right of your posts).

At this point the rule kicks in, which just says “now, make the main post list 100% width, and this is important, so do it no matter what, and ignore the super specific selector from the other style sheet.”

Does this help?
alexnorman73 · Member · Mar 21, 2015 at 2:45 pm
Copy link
Hi jsmutek – that works perfectly – thank you!

No items found.