Custom Mobile CSS for Landscape Smartphone View

[Judy Asman]

Hi, Andre,

I’d like to add more top padding in my bottom right column of my front page for mobile (landscape) view. Can you please confirm which of these I should use? I tested mobile CSS last week and it seemed to work. This week it is not. Is it either of the bottom two where I should add my different code?

I show where I currently have it below but it doesn’t appear to work. Thanks.

My site: http://64.78.29.189/wp/

******************

@media screen and (max-width: 320px) {
}

@media (min-width: 321px) and (max-width: 480px) {
}

@media screen and (max-width: 480px) {
}

@media (min-width: 481px) and (max-width: 768px) {
}

@media screen and (max-width: 768px) {
.homepage_right {
	width: 100%;
	height:1025px;
	background-image: url(images/far_right.jpg);
	background-repeat: no-repeat;
	padding-top:50%;	
	padding-left:12px;
	padding-right:12px;
	font-size:1em;	
	background-color: #dcf0f1;	
}

}

[Sushil Adhikari]

Although this isn’t covered by theme support, this is one of those things where you will have to try out with the placement of your CSS in the above query group. However, I’m not sure what you want to do when you say more top padding in the far right column you made because when I view it, it looks fine. As for landscape view, this usually is around 650px or less for phones, more for tablets such as the 1024px on high res devices.

By the way, whenever you paste code, highlight it and select the “code” icon on the editor that looks like this
….I just did this to your code.

[Judy Asman]

Thank you, Andre. I apologize for the delayed response. I’ll be sure to do that with code in the future.

Also — I appreciate the dimensions and tip. Right now, I agree with you that it looks fine as-is. I was having more trouble with the job widget blowing out in terms of height and width but I’m working on that with the job service.

Thank you again!

[Author]

Posts