Hello working on my website www.eugenemdonaghy.co.uk trying to get my social media in the footer but unable to get all in the footer social media icons appear outside the footer on a mobile site

have a codepen at Untitled

 

 

Edited April 8Apr 8 by eugenemdonaghy
Uploading screenshot

You have set a fixed height to your .footer-basic class: height: 238px;

Either remove the height rule, or you could change it to min-height: 238px; in which case it should expand to fit the contents.

that worked but footer is having in one line want on mobile site to have on separate lines

Edited April 9Apr 9 by eugenemdonaghy
Adding screenshot

Split the line into two divs.

Display as inline-block on desktop and block on mobile.

whats my best way to do that I have tried to set the max width as 768px

codepen  for  reference https://codepen.io/eugenemdonaghy/pen/JoRaYYO

 

You are using a list for your footer menu. If you want the list items to stack on mobile change the list item from display: inline to display: block.

You many need to remove the list-inline-item class.

TBH, the whole site structure and CSS is a real mess. You could make it so much simpler.

how can i simplify the site structure  got chatgpt to look at the css

32 minutes ago, eugenemdonaghy said:

...got chatgpt to look at the css

That wasn't a good idea. If you must use AI claude is far better.

Get rid of bootstrap - it's dated and clunky and adds in load of code you don't need.

You then have two more CSS files you don't need. Instead of icons try using SVG

Experiment with display:grid and display:flex. They will give you far more control than using lists.

But I have to ask. For whom is the website? Is it so you can learn to code or is this just a hobby site?