[Anam]

Hello,
Sorry, had posted this in the wrong theme topic.
I have the ecommerce theme installed on my website. When i try to add custom CSS to reduce the width, the widgets are not getting resized, but they get shifted to the bottom.

@media screen and (min-width: 961px) {	
	#primary {
		width: 530px;		
		width: 53rem;
	}		
	#secondary {
		width: 300px;
		width: 30rem;
	}		
}
@media screen and (min-width: 1025px) {
	#primary {
		width: 590px;		
		width: 59rem;
	}		
	#secondary {
		width: 300px;
		width: 30rem;
	}		
}
@media screen and (min-width: 1153px) {
	#primary {
		width: 670px;		
		width: 67rem;
	}		
	#secondary {
		width: 310px;
		width: 31rem;
	}	
}
@media screen and (min-width: 1281px) {
	#primary {
		width: 750px;
		width: 75rem;
	}
	#secondary {
		width: 320px;
		width: 32rem;
	}	
}
@media screen and (min-width: 1345px) {
	#primary {
		width: 770px;
		width: 77rem;
	}
	#secondary {
		width: 360px;
		width: 36rem;	
	}
}

[Mahesh]

@anamaggarwal1991gmail-com: Why are you using both px and rem? Use px only and try again. Please use the following CSS:

@media screen and (min-width: 961px) {	
	#primary {
		width: 530px;		
	}		
	#secondary {
		width: 300px;
	}		
}
@media screen and (min-width: 1025px) {
	#primary {
		width: 590px;		
	}		
	#secondary {
		width: 300px;
	}		
}
@media screen and (min-width: 1153px) {
	#primary {
		width: 670px;		
	}		
	#secondary {
		width: 310px;
	}	
}
@media screen and (min-width: 1281px) {
	#primary {
		width: 750px;
	}
	#secondary {
		width: 320px;
	}	
}
@media screen and (min-width: 1345px) {
	#primary {
		width: 770px;
	}
	#secondary {
		width: 360px;	
	}
}

Regards,
Mahesh

[Author]

Posts