I am new to media queries and I have the following problem. I need to fit this easy layout (www.spiaggiati.it/antani/) for smartphones and tablets in particular (desktop are not so important for this application).
I've tried with this in the order you see (you can check screen.css sheet on my website):
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) (for smarthpones)
@media only screen and (min-width : 321px) (for smartphone landscape)
@media only screen and (max-width : 320px) (for smartphone portrait)
@media only screen and (min-width: 768px) (for tablet and desktop)
The problem is if I edit the last part (tablet and desktop) also the layout on my smartphone changes. Probably I am not catching how media queries work...
I do not need very complicated functionalities, as you can see the layout is very simple and I need to adjust only some height, width and font-size.
Can you help me?
Thank you in advance for your cooperation.