Completed Local Weather app? Please present your views and improvements and features you would like

Completed Local Weather app? Please present your views and improvements and features you would like
0

#1

#2

Hi,

I thought it was broken at first until I shrank the screen.

You need to change this:

@media all and (min-width: 800px) and (max-width: 1366px) {

to this:

@media all and (min-width: 800px) {

and it will solve this problem at larger screens. You must figure out how to fix that same issue on tiny screens though!

I havn’t done a full review of css as I don’t have the time right now, but what I have noticed is that you are repeating css declarations. You don’t need to repeat them per media query if there is no change in value.

Design wise, its very easy on the eye. Nice colors and functionality is good too. Your link is http however, post a link to the https version.

Cheers

Mark


#4

Thanks for the helpful feedback. The media query
max-width: 1366px was there cause i copied it from my other project and
forgot to remove, thanks for the helpful review.

Can you please explain a little bit more about repeating css decleration.


#5

Hi, no probs.

this:

@media all and (min-width: 200px) and (max-width: 400px) {
	.layout-container {
		width: 90%;
		height: auto;
		margin: 0 auto;
		background-color: inherit;
	}

has the same CSS declarations (rules) as the following

@media all and (min-width: 400px) and (max-width: 600px) {
		.layout-container {
		width: 70%;
		height: auto;
		margin: 0 auto;
		background-color: inherit;
	}

It could be written as the following, saving yourself some typing (or pasting!) and saving the browser some work, and the internet some bandwidth.

@media all and (min-width: 400px) and (max-width: 600px) {
		.layout-container {
		width: 70%;
	}

This is because those rules omitted don’t change between screen sizes. You only need to change, or add the ones that are affected.

Cheers

Mark