Thanks! I worked it out. Your tutorial helped me get the final part done. Happy New Year!

Ok, thanks Bogdan. It looked like it called for a string, and the more I looked at this, it seems beyond my knowledge to be able to transform html into a string. I’ll try some other kind of string!

Hello JDF and Bogdan,

I hope you don’t mind me joining your conversation. I would like to know how you solved JDF’s issue #3 (setting mobile header height with CSS).

I have searched for how to solve this but cannot find the solution. This screenshot at this link will show you that I need to increase the height of the white-space header behind my logo and menu button: https://www.screencast.com/t/mi6La8Di

(I was not happy with the smaller size of my mobile logo with menu so I changed the CSS a little, fyi.) Thank you for any guidance you can give me on where you located this in CSS!

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.

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

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!

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;
}

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

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.

Oh, wow. I completely missed that. I looked before but couldn’t find it! Problem solved. Thanks!!