[Resolved] Styling an area in Loop Editor

[Author]

Posts

[Pete]

Hi there,

On this test page for search results: hidden link

I am very rusty using HTML however I have a grasp of the basics and yet struggling with the top section, see pic attached.

I have this in the Loop Editor:

<span class='number-text'>Great, we've found [wpv-items-count] properties that match your search criteria.</span>
<div style = "height:45px;"></div>

Styled with this:
.number-text {
color: #ffffff;
font-family: "Roboto", Sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.6em;
margin-left: 15px;
background-color: #626972;
padding-left: 3em;
padding-right: 3em;
padding-top: 1.2em;
padding-bottom: 1.2em;
}

How do I get the background color to extend the length of the grid please?
This of course would need to be responsive which it isn't at the moment. How to I make text slightly smaller and it work on mobile?

I'm basically trying to make this look the same as the SEARCH heading to the left.

Thank you. Pete

[Nigel]

Hi Pete

This is a support forum for questions about Toolset plugins. For general questions about HTML and CSS you should really be asking in places such as Stack Overflow.

In your example above your text is included inside span tags. Spans are inline elements, meaning they don't start a new line and only occupy as much width as their content. Divs are block-level elements, starting a new line and occupying 100% of the containing element width.

So you could make that block full width by either changing your span to a div, or by adding a style rule to the span to set display: block, when it will behave as if it is a block-level element such as a div.

[Pete]

My issue is resolved now. Thank you!