Announcement

Collapse
No announcement yet.

Small difference in gap above sidebars

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Small difference in gap above sidebars

    Hi,

    Many people may think I'm being finicky I dont know.. but as a graphic designer I have a keen eye for detail, and I notice that on the unedited Smart responsive theme that there is a difference in the gap above the left and right sidbars. See attached image.
    I cant imagine this is intentional... (maybe it is for reasons I dont understand?) However whenever I open the page my eye is drawn to this discrepency straight away.

    Does anyone know how it can be changed so both sidebars match?
    Attached Files
    Arka Tribal Jewellery

    #2
    Further finicky points are the box around the central area content is closer to the top menu than the sidebars and also it is closer to the left sidebar than the right sidebar. The CSS is in the Design Library the Responsive CSS: #left-sidebar, #right-sidebar { float:left; width:19%; margin:1.2% 0; padding:1% 0; }

    W3C margin properties states "The percentage is calculated with respect to the width of the generated box's containing block". That is the cause. I don't know if they are aware of the sidebar % margin issue or still coded it for a reason. Generally % is used in the CSS because it is responsive. Possible solution em instead of % should be responsive but pixels are not.
    Peblaco

    Comment


      #3
      Originally posted by peblaco View Post
      Further finicky points are the box around the central area content is closer to the top menu than the sidebars and also it is closer to the left sidebar than the right sidebar.
      Yes ! I was coming to them later !

      Originally posted by peblaco View Post
      I don't know if they are aware of the sidebar % margin issue or still coded it for a reason. Generally % is used in the CSS because it is responsive.
      Maybe no-one noticed the discrepancy in the gaps!?

      Thanks for your advice.
      Changing;
      #left-sidebar, #right-sidebar { float:left; width:19%; margin:1.2% 0; padding:1% 0; }
      to
      #left-sidebar, #right-sidebar { float:left; width:19%; margin:0.5em 0; padding:1% 0; }

      levels them up and makes me feel happy.

      I wonder if you know how to make both sidebars the same width?
      I am using John Ennals method for specifying a fixed (maximum) width from this thread;
      http://community.sellerdeck.com/show...649&page=2a#20
      Changing the values in settings:site options:general can make both sidebars equal width.. but as I show in the screenshots it puts the categories menu off centre on small screens!
      Arka Tribal Jewellery

      Comment

      Working...
      X