Some elements are too close to the page borders
Oxyrus opened this issue · 4 comments
Issue Description & Expected Outcome:
I don't know if this is expected, but in my opinion some elements (see screenshots below) are too close to the page borders, giving them a little bit of space would make it look better.
My screen resolution is 1366x768.
-
Footer logo
-
Comment box
-
Dashboard header icons
-
Library header icons
-
User profile inputs
Symptoms:
N/a
Steps to Recreate:
Visit the corresponding pages:
- Logo is present in every page http://devgaido.com/dashboard
- Comment box is present in any path http://devgaido.com/paths/srcctrl
- Dashboard header icons http://devgaido.com/dashboard
- Library header icons http://devgaido.com/library
- User profile inputs http://devgaido.com/profile
Resolution:
N/a
This is an issue on desktop screen res, it was always pushed back but now it's time to give it a bit of priority.
@Oxyrus just for reference could you add your browser resolution?
Turns out this problem seems to be due to how the element styles are defined depending on the media queries. If the webpage is more than ~1430px or so, white space is given to make the content a little centered and more user friendly.
This seems to be applying for all the other elements in the page layout.
So there should be a single switch to the problem somewhere.
When the page width is less than ~1430px, the white space is totally gone.
Suggested Fix: I checked out a few elements via Dev tools and it turns out most of the elements do not have margin at all And also the header component is using padding to space data around, I've found that padding can act weird sometimes! Maybe you guys should add a little amount of margin to every element. :D