[Support request] Can't get floated logo to display

[Craig]

I’ve created a Page Hero with merged header with the following element class name: header_element

Here is the code for the element:

<div class=fp_logo></div>
	<div class=fp_description>
			<h2> PRINCE EDWARD ISLAND'S</h2>
			<h1> HOME, AIRBNB, & SMALL OFFICE CLEANING SERVICE </h1>
			<p>A more modern, efficient approach to cleaning. Book an appointment <b>in 60 sconds</b> to learn how.</p>
	</div>

header_elements is the parent container
fp_log is a container for the logo.
fp_description a container for the descriptive text

CSS:

/*Make sure header_element is 100% width */
.header_element{
	width: 100% !important;
}
/* Float logo to the left: */
.fp_logo{
	background-image: url("http://localhost:8080/spectraclean/wp-content/uploads/2019/01/headerlogonew.png");
	background-repeat: no-repeat;
	float:left;
}
/*Styling for fp_description container */
.fp_description{
	text-align: center;
	width: 50%;
	margin: 0 auto;
	padding-top: 100px;
}

I cannot get the logo to display with float left. I’ve confirmed the URL for the image is correct.

Here is a pic of what the header currently looks like and where I would like the logo to be positioned:

[img]https://i.imgur.com/fGUdc7h.png[/img]

[Tom]

Hi there,

Any chance you can link us to your website so we can inspect the code? You can edit your original topic to privately share the URL.

Let me know 🙂

[Craig]

@Tom running on local environment unfortunately

[Tom]

Hmm, hard to know for sure then.

What happens if you give the logo element a fixed width and height?

[Craig]

It works if I specify fixed width & height

[Tom]

That’s likely the issue. Since you’re using a background image and the div doesn’t have any content, it doesn’t have any size.

Any reason why you’re not just adding the image into the HTML instead of using a background image?

[Author]

Posts