CSS for @media queries

/*some common breakpoints for widths of devices:

    320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV
    */
#xmods-twttr-footer{
	padding-bottom: 30px;
	display: flex;
	position: relative;
}

.xmods-twttr-li{
	float: left;
	width: 260px;
	padding:5px;
}
.xmods-twttr-img{
	
	width: 250px;
}

.xmods-twttr-img:hover {
    border:1px solid #4a4a4a;
}

@media only screen and (min-width: 320px) {
	.xmods-twttr-li{
		width: 115px;
		padding:9px;
	}
	.xmods-twttr-img{
		width: 110px;
	}
}
@media only screen and (min-width: 481px) {
	.xmods-twttr-li{
		width: 195px;
		padding:13px;
	}
	.xmods-twttr-img{
		width: 180px;
	}
}
@media only screen and (min-width: 768px) {
	.xmods-twttr-li{
		width: 170px;
		padding:13px;
	}
	.xmods-twttr-img{
		width: 150px;
	}
}
@media only screen and (min-width: 1024px) {
	.xmods-twttr-li{
		width: 240px;
		padding:14px;
	}
	.xmods-twttr-img{
		width: 175px;
	}
}

@media only screen and (min-width: 1200px) {
	.xmods-twttr-li{
		float: left;
		width: 295px;
		padding:15px;
	}
	
	.xmods-twttr-img{
		width: 180px;
	}
}