[Sierra KParticipant]

I have been attempting to add columns into the footer. I have had to alter the html code to try to accommodate for the footer area but it is still not working. Below is the altered coding:
<tr>
<td colspan=“1″>
<p align=”left”>
<td>3125 NW 35th Ave
<br>
Portland, OR 97210</td>
<br>
<td><br>Phone: 503-224-8500</td>
<td><br><br>Toll Free: 800-998-7767</td>
<td><br><br>P.O. Box 10948
<br>
Portland, OR 97296</td>
</p align=”left”>
</tr>
<tr>
<td colspan=“5”>
<td style=“vertical-align: top;>
<p align=”right”>
<td><b>COMPANY</b></td>
<td><br>Mission</td>
<td><br>History</td>
<td><br>Staff</td>
<td><br>Careers</td>
<td><br>Community</td>
<td><br>Contact</td>
</p align=”center”>
</tr>
<tr>
<p align=“right”>
<td><b>SERVICES</b></td>
<td><br>Fuels</td>
<td><br>Lubricants</td>
<td><br>Industrial Solutions</td>
<td><br>Car Wash</td>
<td><br>Heating & Cooling</td>
<td><br>Equipment</td>
<td><br>Retail Stations</td>
</tr>
<tr>
<p align=“right”>
<td><b>RESOURCES</b></td>
<td><br>Credit Application</td>
<td><br>Manuals</td>
<td><br>Tax Information</td>
<td><br>SDS</td>
</tr>
<tr>
<p align=“right”>
<td><b>LOCATIONS</b></td>
<td><br>Portland HQ</td>
<td><br>Albany</td>
<td><br>Eugene</td>
<td><br>Hood River</td>
<td><br>Madras</td>
<td><br>North Bend</td>
<td><br>Portland- Equipment</td>
<td><br>Prineville</td>
<td><br>Tillamook</td>
<td><br>Toledo</td>
</tr>

Any help would be much appreciated. I will attempt to attach images. Thank you!

[ChristianModerator]

Hey Sierra,

That is a custom HTML structure in your footer. Moreover, your custom HTML has lots of syntax error. Please use the column code below

<div class="x-column x-1-3">
<p>3125 NW 35th Ave
<br>
Portland, OR 97210</p>

<p>Phone: 503-224-8500 </p>

<p>Toll Free: 800-998-7767 </p>

<p>P.O. Box 10948 
<br>
Portland, OR 97296</p>
</div>

<div class="x-column x-1-3">
<p>Add your content here...</p>
</div>

<div class="x-column x-1-3 last">
<p>Add your content here...</p>
</div>

Let us know how it goes.

Thanks.

[Sierra KParticipant]

The only issue is the spacing is not working 🙁
Please see below:

http://carsonoil.carsonoildevelopment.com

Thanks

[DarshanaModerator]

Hi there,

Could you please try adding the following CSS workaround into your Customizer, Custom > CSS section using the menu Appearance -> Customize.

.x-colophon.bottom {
    min-height: 300px;
    padding: 20px 0;
}

Hope that helps.

[Sierra KParticipant]

That helped. The only issue now is that it is not compression for mobile users. Thanks for the help!

[ZeshanMember]

Hi Sierra,

Thanks for writing in!

If I understood your question correctly, do you want to fix this issue: http://prntscr.com/5kj2tv? If yes, add following code under Custom > CSS in the Customizer:

.x-colophon.bottom .x-colophon-content {overflow: hidden;}

Hope this helps. 🙂

Thank you.

[Sierra KParticipant]

Hello!

I added this to the CSS and unfortunately it did not work. 🙁 Do we need to adjust the html markup that is in the footer?

[John EzraMember]

Hi Sierra,

please try the following css instead:

footer.x-colophon.bottom .x-container-fluid.max.width .x-column.x-1-5 {
    width: 16.8%;
}

footer.x-colophon.bottom .x-container-fluid.max.width .x-column.x-1-5.last {
    margin-right: 0px;
}

Hope this helps!

[Sierra KParticipant]

I am having some more issues with the footer….the phone numbers are now wrapping on the mobile device. I tried adding a break and placing the number below “phone” or “toll free” and that still did not work.

http://carsonoil.carsonoildevelopment.com

Thank you,

Sierra

[NicoModerator]

Hi There,

Try adding this media query in your Customizer’s Custom CSS:

@media (max-width:979px){
.x-colophon.bottom .x-colophon-content{
letter-spacing: 0px !important;
}.x-colophon.bottom{
font-size:9px !important;
}
}

Hope it helps.

Let us know.

Cheers.

[Sierra KParticipant]

I tried that out and it is still not working. 🙁

[NicoModerator]

Hi There,

Would you mind sharing us your admin credentials so we could take a closer look on your setup.

Don’t forget to set it as private reply.

Thank you so much.

Cheers.

[Sierra KParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Sierra,

Thanks for the logins!

Upon checking, there are some issues in your custom CSS code in the Customizer, that’s the reason above provided code is not working. Please try replacing your entire CSS code under the Customizer with following (make sure to keep a backup of previous code in a safe place):

.x-navbar {
    background-color: #ffffff;
    background: url(http://carsonoil.carsonoildevelopment.com/wp-content/uploads/2015/03/NavPattern.jpg)
}
.x-colophon.bottom {
    min-height: 300px;
    padding: 20px 0;
}
@media (max-width: 979px) {
    .x-navbar {
        background-image: none !important;
    }
}
@media (min-width: 980px) and (max-width: 1024px) {
    .x-navbar .x-nav>li>a {
        padding-left: 0.1em;
        padding-right: 0.1em;
        font-size: 14px;
    }
    footer.x-colophon.bottom .x-container-fluid.max.width .x-column.x-1-5 {
        width: 16.8%;
    }
}
footer.x-colophon.bottom .x-container-fluid.max.width .x-column.x-1-5.last {
    margin-right: 0px;
}
@media (max-width: 979px) {
    .x-colophon.bottom .x-colophon-content {
        letter-spacing: 0px !important;
    }
    .x-colophon.bottom {
        font-size: 9px !important;
    }
}

Thanks!

[Author]

Posts