[Eric]

by adding this in the custom css area, the second widget has always the same left margin:

@media screen and (max-width: 767px) {
	/* Larger Smart Devices */		
	#secondary .widget {
		margin-left: 40px;
		width: 246px;
	}
}
@media screen and (max-width: 560px) {
	#secondary .widget {
		margin-left: -20px;
		padding: 10px 4%;
		width: 91%;
	}
}
@media screen and (max-width: 480px) {
	#secondary .widget {
		margin-left: -20px;
		padding: 10px 4%;
		width: 91%;
	}
}

Regards

[Mahesh]

@ericmuc: Checked your site and the margin left in your Custom CSS is working fine correctly (reflecting as it should on the front end). But as I checked, I think you can remove the middle one media rule i.e. the below code:

@media screen and (max-width: 560px) {
	#secondary .widget {
		margin-left: -20px;
		padding: 10px 4%;
		width: 91%;
	}
}

It is causing some design issue when viewed at width 560px to 481px. Other is working fine as it should.
Let me know if any problem.

Regards,
Mahesh

[Eric]

Hi Mahesh,

Thanks! If I delete this part, I have following error at some point, if I make the browser windows smaller: Image. So what is the solution, that I have here the margin right and no design issue at 560px to 481px?

Kind regards
Eric

[Mahesh]

@ericmuc: Its kinda strange, earlier when I checked your site having all of the above code above in Custom CSS, the widget seem to be sticking out to left iat 560px to 481px (causing design issue) and now you’ve removed it (as per my suggestion), causing design issue as in the image link you’ve provided. Please use the Custom CSS that you’ve put earlier and this design issue will be fixed. May be a cache problem in mine earlier.
Let me know if any trouble.
Sorry of the inconvenience.

Regards,
Mahesh

[Author]

Posts