Modifications of the pages:
We need a clean screen. We need to have the header as simple as possible. It will help with small devices:
Author name: I will move to the bottom, close to the social buttoms. Like wordpress do by default. Also the div@content must have some order, now, in a tablet is bigger than in a computer screen . I think we could make it better. Besides, is too litle if we have tables, we need a litle more of space, just a little in order to be able to have 4 colums. Now just 3 are possible (without scrooll)
Also to change the font size as the size of the screen. Maybe helps for the space and for reading
Examples: Medium.com
Modifications fo @ <544px
I think the content must not to have padding at all. Or just 5 px.
also font-size: 0.9 em
Modifications for @ <768px
Search as a buttom istead as a place for writing. Afther the buttom, some pop up where we could write the data.
Edit buttom, instead as a label in the left, as a buttom in the top.
font-size: 1.em
Modifications for @ ≥768px
div#content must be up to 650px with a padding: of 25 each side.
font-size: 1.1em
In the future, if we change the theme, I will write my ideas in the @ place screen dimensions mediaqueries post
pd: @media screen and (max-width: 1024px) {
/* Style adjustments for portrait mode goes here */
#content {
font-size: 1.1em; } these line of code should disapear, make the text biger as the screen is litle? should not be the opposite?
There are more mistakes in the css, as we need to change all the @, i don´t think is important to fix now,
i think will be better to modify the theme to the new queries dimensions as Ned suggest or I do here with a tiny suggestion.