[Anam]

Hello,
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: Please post in your site url.

Regards,
Mahesh

[Anam]

Hi,
The website is still locally hosted. Following is the screenshot.

[Anam]

Hello,
Can you help? I am not able to figure it out.

[Anam]

@Mahesh kindly help me out if you can understand what might be wrong.

[Mahesh]

@anamaggarwal1991gmail-com: Sorry for the late reply.
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