sub-footer text not perfectly centered

Hi. I followed instructions on a previous Newspaper Forum post but still have a problem. As you can see in the link below, the sub-footer text on my site is not perfectly centered – it is a little to the right of center. When I reduce the size of the screen to tablet/smartphone size, the text then is centered perfectly. I’ve tried many solutions but still cannot solve this.

Screenshot of problem: https://www.screencast.com/t/F6VkejmjczKw

Below are the instructions I followed from a previous post (deleting some code in the footer.php file and adding some CSS). I appreciate your help on this – thanks!! – Nick

Previous forum post (#104687; advice from Bogdan):

Hello,
Unfortunately this will not be so easy as the sub-footer is divided in 2 sections. 1 for the copyright and the other for the sub-footer menu. The copyright can be centered but only by altering the theme files and removing the container needed for the menu and then using css to position the copyright text.
You first need to remove this part: http://screencast.com/t/pCzg2vn8

Then use this css code in the theme panel for positioning:

.td-sub-footer-copy{
display: table;
margin-left: auto;
margin-right: auto;
float: none!important;
}

Thank you!

Thanks Catalin. I cleared my browser caches (on Chrome and Firefox). I also installed the WP Super Cache plugin according to the tagDiv tutorial and cleared the server-side cache. I am not using a CDN right now.

Despite all this, the sub-footer tagline that I have below my footer social icons is still skewed to the right. I am attaching a link here so you can see a close-up screenshot of this: https://www.screencast.com/t/vI3LQ6VdkVd

On the right side, the sub-footer line goes past the YouTube icon, but on the left it is “inside” the Facebook icon.

When I downsize my screen to tablet/iPad and phone sizes, the sub-footer becomes perfectly centered – it’s ok. It is only at the larger screen sizes that it is skewed right. I wonder if there is some padding setting in CSS that is doing this? I have tried modifying the CSS a lot but nothing works. For example, I have tried using code based on the “@media (min-width: 768px) and (max-width: 1018px)” commands in CSS, but no luck.

Is there another way I could have you look at it? Give you a user access? I really appreciate your help.

Hi. I figured out the problem, but I cannot figure out the solution.

The problem is NOT what I stated in my previous emails. I stated that the sub-footer was skewed too far to the right. However, I realized later that the problem is with the social icons in the footer (not sub-footer). These social icons are skewed to the LEFT compared to all the other elements on my homepage screen. So I looked for some margin or padding issues in the CSS.

In the following CSS, when I changed ‘margin-right’ to 0, the social icons became closer together, but they also became perfectly centered. So the problem is that 30px is being put to the right of the right-most social icon (for me, the YouTube icon):

.td-footer-template-13 .footer-social-wrap .td-social-icon-wrap {
margin-right: 30px;
text-transform: uppercase;
font-family: ‘Open Sans’, arial, sans-serif;
/* responsive portrait tablet */
/* responsive portrait phone */
}

I am not familiar enough with the CSS and which classes govern which elements. I like having the 30px in between the elements, but obviously there should be ‘margin-right: 0’ for the final (right-most) social icon.

So would you please tell me how to fix this? Many thanks!!

Nick

And, I think this means that for the other two responsive sizes (below), the margin-right for the right-hand social icon also needs to be set to zero for the social icon line to be centered accurately:

@media (min-width: 768px) and (max-width: 1018px) {
.td-footer-template-13 .footer-social-wrap .td-social-icon-wrap {
margin-right: 20px;
}
}

@media (max-width: 767px) {
.td-footer-template-13 .footer-social-wrap .td-social-icon-wrap {
margin: 5px;
}

Thanks. My site was not yet live when I emailed you before. It is now live, so you can see it here: http://www.romiyo.com/

On the homepage, three items are all aligned center: the Romiyo logo at top, the “Roam the way you want to.” text, and finally the “Travel information and inspiration, in Virginia.” text.

The social icons are skewed to the left, and I think it is because there is “margin right: 20px” set to the right of the right-most icon (YouTube). If this margin-right value can be set to 0px then I think the social icons will be centered correctly, but I can’t figure out how to do that.

Thanks!

Thanks, but the problem I am trying to solve is shown in this graphic: https://www.screencast.com/t/JoERJJ0b7

Sorry, I should have sent you a better graphic like this to show you what I mean. From the yellow lines, you can see how the social icons are off center (to the left) from the sub-footer tagline. From the green, you can see how the sub-footer tagline, middle-of-page tagline, and top logo are centered. The magenta box shows the gap on the right.

Nick

That’s it! Thank you very much!

Btw, I am enjoying your theme. Great work and I am impressed with your responsive customer service.