CSS help (footer)

[Joveice]

Hi, I own this "template / site / theme"

 

http://webapplayers.com/inspinia_admin-v2.7/dashboard_4.html

 

And I'm trying to create a footer like the new Github's main page footer (rows)

 

 

This is my code.

 

<div class="footer">
            <div class="container">
                <div class="row">

                    <div class="col-lg-2 col-xs-6 col-lg-offset-3">
                        <ul class="unstyled" style="padding-left: 0 !important;">
                            <li>© 2015-2017</li>
                        </ul>
                    </div>
                    <div class="col-lg-2 col-xs-6">
                        <h4>Features</h4>
                        <ul class="unstyled" style="padding-left: 0 !important;">
                            <li><a href="/ce">Conan Exiles</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-2 col-xs-6">
                        <h4>Resources</h4>
                        <ul class="unstyled" style="padding-left: 0 !important;">
                            <li><a href="#">Support</a></li>
                            <li><a href="/terms">Terms</a></li>
                            <li><a href="/privacy">Privacy</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

 

Tho when I move to a mobile device / smaller display it overlaps the bottom items, I tryed to add margin bottom 100px to the main container (fixed the issue). tho if I then add more to the footer it will stil overlap. How do I fix this fellow CSS coders?

[mpsparrow]

I am not a CSS expert, but I would use the @media CSS to optimize it for mobile devices. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[Joveice]

5 minutes ago, mpsparrow said:

I am not a CSS expert, but I would use the @media CSS to optimize it for mobile devices. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Yes! This I have found out myself, but thanks anyways!

 

I'm just thinking on how to make it go down when content is added in a effective way

[jslowik]

At a glance, it's probably because you have too many xs columns in the row. Change all the xs columns to 4 and see if that helps.

[Joveice]

13 hours ago, jslowik said:

At a glance, it's probably because you have too many xs columns in the row. Change all the xs columns to 4 and see if that helps.

No, thats not the issue. if I do that it will overlap all the content when you look from a phone.

 

I redesigned it now and it looks better and all that. but I still have the overlap issue if I add to much stuff into it. the object above got 

padding-bottom: 521px;

Which pushes down the footer so there is a gap of 32 pixels from the last item to the top of the footer (only in PC view) how can I make it do even more on phone? Do I need to use the media stuff?

[jslowik]

Just set each column in xs to 12 then so they fill the row at that viewport. Not sure what drugs I was on last night.

 

Or do what I've done on occasion and just set the col-md width only (I'm not a designer at all, I'm a backend guy that's forced to pretend to do this stuff). It'll function on all viewports. Probably not elegantly though.

 

I'll attach a couple screens quick that i tossed together. The only changes to these are only setting the divs to only have medium columns.

 

<div class="footer">
            <div class="container">
                <div class="row">

                    <div class="col-md-2 col-md-offset-3">
                        <ul class="unstyled" style="padding-left: 0 !important;">
                            <li>© 2015-2017</li>
							<li>© 2015-2017</li>
							<li>© 2015-2017</li>
							<li>© 2015-2017</li>
							<li>© 2015-2017</li>
							<li>© 2015-2017</li>
                        </ul>
                    </div>
                    <div class="col-md-2">
                        <h4>Features</h4>
                        <ul class="unstyled" style="padding-left: 0 !important;">
                            <li><a href="/ce">Conan Exiles</a></li>
							<li><a href="/ce">Conan Exiles</a></li>
							<li><a href="/ce">Conan Exiles</a></li>
							<li><a href="/ce">Conan Exiles</a></li>
							<li><a href="/ce">Conan Exiles</a></li>
							<li><a href="/ce">Conan Exiles</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2">
                        <h4>Resources</h4>
                        <ul class="unstyled" style="padding-left: 0 !important;">
                            <li><a href="#">Support</a></li>
                            <li><a href="/terms">Terms</a></li>
                            <li><a href="/privacy">Privacy</a></li>
							<li><a href="#">Support</a></li>
                            <li><a href="/terms">Terms</a></li>
                            <li><a href="/privacy">Privacy</a></li>
							<li><a href="#">Support</a></li>
                            <li><a href="/terms">Terms</a></li>
                            <li><a href="/privacy">Privacy</a></li>
							<li><a href="#">Support</a></li>
                            <li><a href="/terms">Terms</a></li>
                            <li><a href="/privacy">Privacy</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

 

[Joveice]

Just now, jslowik said:

Just set each column in xs to 12 then so they fill the row at that viewport. Not sure what drugs I was on last night.

 

Or do what I've done on occasion and just set the col-md width only (I'm not a designer at all, I'm a backend guy that's forced to pretend to do this stuff). It'll function on all viewports. Probably not elegantly though.

 

You are missing the point.

 

The footer overlaps the content above it has nothing to do with the col.

[jslowik]

So show us what you have above it? It's probably the same kind of thing.

 

If you're getting overlaps with bootstrap it's usually down to not doing the column math correctly.

[Joveice]

4 minutes ago, jslowik said:

So show us what you have above it? It's probably the same kind of thing.

Here you got PC view and mobile view, as you can see it's overlapping.

[jslowik]

Hmm. Couple of things that come to mind, but I'm not sure on any of them. If I were in this situation I'd spend some time with my browsers dev tools and the element inspector to see if I could maybe figure out where the issue is/see where the problem divs are. Maybe there are rows in the body that have an issue with the number of columns and that's causing them to artificially push down into the footer. As I mentioned most of the time I have an issue like this that's why.

 

If you know adding padding fixes it you could just add that padding in a media query for the size that is the issue.

 

Sorry I can't be of more assistance.

[Joveice]

3 hours ago, jslowik said:

Hmm. Couple of things that come to mind, but I'm not sure on any of them. If I were in this situation I'd spend some time with my browsers dev tools and the element inspector to see if I could maybe figure out where the issue is/see where the problem divs are. Maybe there are rows in the body that have an issue with the number of columns and that's causing them to artificially push down into the footer. As I mentioned most of the time I have an issue like this that's why.

 

If you know adding padding fixes it you could just add that padding in a media query for the size that is the issue.

 

Sorry I can't be of more assistance.

Yes I already know where the issue is, I just don't know a good way to fix it.