Topic: 3 column footer landscape / horizontal modus for tablets

Tagged: x

Author

Posts
October 25, 2016 at 5:04 am #1229582
sharp-image
Participant
Hi,

I’m a little struggling with the footer of https://forevermusic.nl/fm-final for tablets. I want that there comes up a 3 column footer in landscape and horizontal modus. Using:
```
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
footer .x-column.x-md {
    float: left !important;
    width: 50% !important;
  margin-top: none !important;
}
```
But that gives a 2 column in horizontal modus and in landschape it show a 1 one column footer…
Any idea what I’m doing wrong?

Thanks Bouke
October 25, 2016 at 5:41 am #1229615
Christopher
Moderator
Hi there,

Please update previous code to :
```
@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 1024px)  {
footer .x-column.x-md {
    float: left !important;
    width: 33% !important;
  margin-top: none !important;
}
}
```
Hope it helps.
October 25, 2016 at 5:55 am #1229628
Paul R
Moderator
Hi Bouke,

Please change your code to this.
```
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
footer .x-column.x-md {
    float: left !important;
    width: 30.66666% !important;
    margin-top: 0 !important;
}

@media (max-width:768px) {
     float: none !important;
     width: 100% !important;
     margin-top: 0 !important;
}
```
Hope that helps
October 25, 2016 at 6:24 am #1229658

sharp-image
Participant

Thanks, almost fixed!

The 2nd and 3rd column are lower then the first one. (See printscreen).
Any idea?

October 25, 2016 at 7:37 am #1229738

Joao
Moderator

Hi there,

Did you remove the code?

Please place it order that we can provide you the adjusment.

Thanks

Joao

October 25, 2016 at 8:01 am #1229758

sharp-image
Participant

This reply has been marked as private.

October 25, 2016 at 9:01 am #1229841

Joao
Moderator

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

October 25, 2016 at 9:57 am #1229927

sharp-image
Participant

This reply has been marked as private.

October 25, 2016 at 1:46 pm #1230306

sharp-image
Participant

Hi it seems that this is almost fixed but now is the footer on mobile devicers also 3 columns. That must be 1 column like before. Thanks so far.

October 25, 2016 at 2:18 pm #1230351
Nabeel A
Moderator
Hi again,

Thank you for providing the credentials. I checked your footer and it looks fine on my end for the tablet view. To fix it for the mobile devices, you can use this code:
```
@media screen and (max-width: 767px) {
.x-colophon.top .x-column.x-md {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
}
}
```
Adjust the max-width as per your need. Do let us know how this goes!
October 26, 2016 at 2:08 am #1230996

sharp-image
Participant

Thanks! That fixed also the one column for mobile devices.
Have a nice day!

October 26, 2016 at 3:27 am #1231090

Christopher
Moderator

You’re welcome.

Have a nice day too.
Author

Posts

<script> jQuery(function($){ $("#no-reply-1229582 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>