I think left and right margins are excesive, specially in the movile versions.

Comments

chris.smith’s picture

Status: Active » Needs review
StatusFileSize
new2.39 KB
new47.98 KB
  • Changed fixed widths on #wrap div to width:90% so that the theme is fully responsive on tablets and phones which solved the large margin-right and left problem.
  • Decreased padding in the footer on the phone media query from 40px to 25px.
  • Added display:block to the #header-social div in tablet view.
  • Added padding-right to the .comment .content class because the text wasn't contained in the main content. *View Screenshot*
  • Added padding-left to the logo so that it gets rid of the awkward spacing.
  • Added margin-left to the 'h3 a' comment title because it was leaking off the main content div.
  • Added a hover state (changes opacity of menu text) to the desktop menu navigation to make it similar to the social media buttons.

All these changes were implemented into the patch I have provided.

chris.smith’s picture

Patch file attached.

bigcrunch’s picture

StatusFileSize
new14.59 KB

It looks great.
Only problem I see mid-sized screens, the logo you step through the menu, and the text "menu" is out of place (see attached file).

Thank you very much!

bigcrunch’s picture

I've solved the wrong "Menu" position by changing "position: inherit;" to "position: center;" in " /*navigation top menu*/
#navigation {" of responsive.css file, but the logo remains hidden because of the menu.

ArlethS’s picture

@bigcrunch
change position back in inherit, turn on title site edit it in css to be black and unselectable,some margins should be adjusted to fit the menu. downside - on the smallest screens there will be a black area under the logo about the same size as it