[iandelmonteParticipant]

Hi there. I have a site that will change logos on mobile http://609.459.myftpupload.com/. (from a horizontal logo to a vertical logo). I’ve put in the following code (below) and it works fine however I’d like to center the mobile logo yet can’t seem to figure it out. Any suggestions would be most helpful.

Thanks!

@media (max-width: 979px){
a.x-brand.img img {
display:none;
}

a.x-brand.img {
display:block;
background:url(‘http://609.459.myftpupload.com/wp-content/uploads/2016/04/dfilogo-RGB-stacked-tag.jpg’) top left no-repeat;
width:300px;
height:327px;
}

[FriechModerator]

Hi There,

Thanks for writing in! Please update your code to this:

@media (max-width: 979px){
	a.x-brand.img img {
		display:none;
	}

	a.x-brand.img {
		display:block;
		background:url('http://609.459.myftpupload.com/wp-content/uploads/2016/04/dfilogo-RGB-stacked-tag.jpg') top left no-repeat;
		width:300px;
		height:327px;
		margin-left: auto;
		margin-right: auto;
	}
}

Hope it helps, Cheers!

[iandelmonteParticipant]

That worked perfectly, thank you! One last question, I’d like to center the text div below the logo on Mobile, Now it’s appearing on the left side. Can you help me center that the text (#headertext):

@media (max-width: 979px){
a.x-brand.img img {
display:none;
}

a.x-brand.img {
display:block;
background:url(‘http://609.459.myftpupload.com/wp-content/uploads/2016/04/dfilogo-RGB-stacked-tag.jpg’) top left no-repeat;
width:300px;
height:327px;
margin-left: auto;
margin-right: auto;
}

#headertext {
float: none;
display:inline-block;
}
}

[ThaiModerator]

Hi There,

Please change:

#headertext {
float: none;
display:inline-block;
}

To:

#headertext {
    float: none;
    display: block;
    text-align: center;
}

Hope it helps 🙂

[iandelmonteParticipant]

Perfect as always, thank you so very much!

[ChristopherModerator]

You’re welcome.

[Author]

Posts