Footer Elements Movement

[designerwriter]

How do I get the footer elements from stop moving beyond the white box above. In other words, when I stretch the window, the Privacy Policy and social icons move beyond the edges of the white About box above. I want both to stay flush with the edge of that box. What do I handle this? Does it have to do with the flex box?

Thank you! designerwriter

xpro.eagleheartdynamic.com

[rad]

Hi Grace,

Thanks for reaching out.

Yes, it’s due to flex layout and sizing, please follow this setup,

1. Please inspect your footer bar and make sure its flex alignment is set to center

2. Then inspect your footer bar’s container and set its max-width equal to your about page’s content width which is 1200px

3. I also noticed that your footer elements aren’t responsive. Please check this on how to control element’s visibility per device. https://theme.co/docs/hide-or-show-content-by-device-size

Hope this helps.

[designerwriter]

Ok I made the changes but why are the social icons squished? How do I fix that? Also, I changed the bottom bar bkgd color where the website is but the font is not changing to white. I refreshed the cache still not changing.

Regarding the unresponsive footer elements, I have not linked anything yet. I will do that when I switch it to the final website. Is that what you meant that they are not responsive? Do you think it’s better of I do the linking now of these footer elements then I don’t have to worry about it later? Thank you for your help Rad.

[christopher]

Hi Grace,

The reason behind the problem that you are experiencing when it comes to the placement of the social icons is that you set them to go to the very end of the screen by margins which are not a good idea.

I suggest that you follow the method below:

1. Add two containers instead of one container inside the bar.
2. Go to the bar settings and set the flex layout option to be Space Between.
3. Go to the first container and set the flex options to be Flex Start.
4. Go to the second container and set the flex option to Flex End.
5. Put the Navigation element into the first container and all the social elements into the second container.

Kindly make sure that you will take time and read this article which will give you an idea of how to use the Flex layout to achieve nearly whatever you like.

By responsive, my colleague did not mean linking to various places. He meant the elements adapting to smaller teens. You can shrink your browser window to see how the elements are reacting to the smaller width and it will mimic viewing the website with mobile phones. Please read the link that my colleague shared for sure to know how you can hide the elements that do not play well on smaller screens and add other elements instead suitable for the mobile view.

Finally, I checked your website and I see this:

I see no color-related issues. I do suggest that you disable the cache while you are developing your website. This will make your life easier, the cache and performance stuff can be done after you finish developing your website.

Thank you.

[designerwriter]

I made the suggestions you gave me. I still have to change the social icons. I should just wait until I drop the Essential Grid in to see what the page is going to look like instead of being concerned about how the footer is going to line up.

The reference page you sent is great and the video has a lot of good information in it. The dark blue bar at the bottom is what I was referring to. My website with the copyright symbol and 2020 is not turning to white when that’s what I set it to. It is directly under the privacy policy info.

I will read that article on making the website responsive but I have to get through the video on flex boxes first! There is so much to learn and remember. Thanks for your help!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.