Docs

[ylpl]

Hi there,

My site is: http://dev.ylpl.net/wordpress

I have a couple questions that I hope are easy to answer.

1. You’ll see that in the top right corner of my site is my contact information. I have floated it right in regular desktop view. However, I’m trying to center it in media query mode using this CSS code.

@media (max-width: 552px) {
.x-topbar #header .my-info {
font-size: 10px;
color:#36648B;
text-align:center;
float:none;
margin-bottom:5px;
}

Unfortunately “float:none” isn’t doing the trick. Is there something I’m missing or something I’m doing wrong?

2. You’ll see near the top in my search box some place holder text stating “Search books, movies, etc.” Is there any way to darken the text so it’s easier to read? I’ve tried a variety of things but to no avail.

3. My last question is more of an observation. I’ve noticed that at random times, the text in my menu (I’m using UberMenu) shrinks. The menu itself keeps the same height and width but the text just seems to shrink. I’ve read that the slider below could be interfering with it so I’ve created some margin between the two but it still does this once in a while. Do you know what could be causing this?

I appreciate everything you guys have done for me. I’d be lost without you.

Thank you,

Daniel

[Friech]

Hi Daniel,

Thanks for writing in! First of all please check your entire custom CSS here: http://csslint.net and address the errors, or else none of the Custom CSS added on customizer will work.

#1 You’re targeting the wrong tag, you should target the <span> that wraps your my-info div.

@media (max-width: 552px) {
.x-topbar #header span {
font-size: 10px;
color:#36648B;
text-align:center;
float:none !important;
margin-bottom:5px;
}
}

#2 Please add this on your custom CSS.

::-webkit-input-placeholder {color: red !important;}
::-moz-placeholder {color: red !important;}  /* Firefox 19+ */

#3 Sorry, I cant replicate that issue on my end. I observe the menu text as I resize my browser window but the text stays at 12px.

Hope it helps, Cheers!

[ylpl]

Thank you so much! Those 2 CSS codes definitely did the trick!

In regards to the 1st part, would there be any way to have multiple media queries that refer to the same thing. For example, let’s say between 552px-768px, I want the same properties but the font size to be 14 px instead of 10px. Is that possible?

Thank you so much again!

Daniel

[Friech]

Hi There,

Yeah sure, you can do something like:

@media (min-width: 553px) and (max-width: 768px) {
	.x-topbar #header span {
		font-size: 14px;
	}
}

Thanks.

[Rue Nel]

Hey Daniel,

Thanks for updating in! If you want to add another media query, you can have something like this:

@media (min-width: 553px) and (max-width: 768px) {
	.x-topbar #header span {
		font-size: 14px;
	}
}

We would loved to know if this has work for you. Thank you.

[ylpl]

Thank you so much! That definitely did the trick!

Daniel

[ylpl]

I guess there’s one part more. I’m trying to start the breaking point on my top bar a little bit sooner. On my iPad (portrait view), my company name and contact information are still in 2 separate columns. How would I start the breaking point sooner to where my company name is stacked on top of my contact information kind of how it would look on a mobile phone?

Thank you again,

Daniel

[Lely]

Hi Daniel,

Try this:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
#header .x-column.x-1-2.x-sm{
    width: 100%;
    float:none;
}
#header .x-column.x-1-2.x-sm:first-child{
   text-align:center;
}
}

Hope this helps.

[ylpl]

You guys are the best! It worked perfectly. Thank you so much again!

Daniel

[Jade]

You’re most welcome, Daniel.

[Author]

Posts