Correcting Overflowing Text In Highlight Banner

[intmotorsports]

In my highlight banner I need to include a long email, but it overflows onto the other section of text/icon. I can write custom CSS to move all text in the banner over, but that does not change the gap between them. I can not find a way to isolate just the Email Us text and icon in CSS and move only that second column in the banner over to the left. Is there any way I can isolate each of the 4 “columns” in my highlight banner separately to select each individually to target in my custom CSS? Help!

[beauxbreaux]

I imagine there could be a few things at play here. Absolutely something we would need to see the code to give you the best result. You have the URL? I just want to make sure you are given code that will work across all devices and not just desktop. You can absolutely target a child of a container without targeting the rest but there may be a better solution.

[intmotorsports]

Here is the URL https://motolifestyle.net/ Thanks!

[beauxbreaux]

So i figured out what styles need to change but there is one thing that will be difficult to figure out if you aren’t versed on coding. So you have what looks like is a class that is loading on that element called ‘highlight-banners-count-4’ that needs to be removed. Why I think this is a dynamic class is because of the naming convention they used. ‘count-4’ suggests that it can change to a different count depending on how many elements you have in there. I imagine this is in an if statement somewhere in your code. I was able to get your design to look that this by removing that class and by adding in this css:

.highlights-banner-block{
	width: fit-content
}

.highlights-banners{
	justify-content: space-evenly
}

This is the result I got after the changes:

It looks like you are using a paid theme Empire Refresh or I would just download the theme to look at the exact code. You could try removing the class with javascript if you can’t figure out how to remove it from the file.

So essentially you would just throw this into your theme.liquid file right about the closing tag…

This may work it just depends on when the class is loaded. This may save you from having to look through code.

Now for the other styles you can also put this right above your javascript code I just gave in tags. Here is the entire code:

Alternatively, you have the option of adding those styles to your css file if you know where those class names are located in your styles.

Let me know if you need me to get into your code or anything like that to help you out. It is a bit more complex due to the classes being generated dynamically.

[beauxbreaux]

Also for your footer if you want your background to look like this:

Instead of this:

You can change your CSS to this:

.site-footer-wrapper {
    background-image: url(vwood.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

[beauxbreaux]

EDIT:

Just noticed that text message is wrapping. You’ll want to also add in text-wrap: nowrap to the css like this:

.highlights-banners-block {
    width: fit-content;
    text-wrap: nowrap;
}

This is the result:

[intmotorsports]

This helped me fix it! Thank you sooo much! Greatly appreciated