Hi,
I’m trying to get my footer to be responsive with X pro theme but can’t seem to make it work. I have read what I can find in the forum but the only solution I find is to hide the footer in ex. mobile and create a new footer for mobile. Isn’t there any better option for this and what happens with the code when this option is chosen? Is the entire footer created with javascript or is it always two footers in the source code?
Thanks for the help!
Hello Pontus,
Usually, when you enable to wrap option of the bar flex settings, the containers will collapse automatically collapse when there is not enough space for the containers to fill the entire area:
The easier option would be to create two bars where one will be for the desktop and one will be for the mobile. This is because you do not need to add any more custom codes to be able to make the footer responsive. All you have to do is set the flexbox child placement for the mobile footer bar to column so that the containers will be displayed stacked to each other. The footer alignment is done through CSS flexbox without any Javascript.
Another option you can try is to add a custom CSS code to the bar that will target the mobile screen width and set the flexbox direction to column like this:
@media (max-width: 767px) {
$el.x-bar $el.x-bar-content {
flex-direction: column !important;
flex: 1 1 100% !important;
}
}
If you are still not able to make the footer items responsive, please provide the URL of the site in question so that we can check it.
Hope this helps.
Hi Jade,
I’m afraid the CSS isn’t working and from what I can see, adding a separate bar for desktop and a separate bar for mobile will show double footers/menus in the code which isn’t great.
The url is: casino-sites.in
Hello Pontus,
Thanks for providing the URL of your site.
I have checked and I will go over each element that you have added in the footer:
The navigation element is not ideal for the mobile version because it will not adjust into columns. It would be best to only have it display on desktop devices and have it hidden on mobile just like what you did for the header:
Then you can add another navigation element just like the Navigation Layered and Navigation Modal element but have it hidden on desktop sizes.
Then you can edit the height of the bar that contains the elements to auto:
Then add this to the Element CSS of the second bar:
@media (max-width: 480px) {
$el.x-bar $el.x-bar-container .x-bar-container {
flex-direction: column !important;
flex: 1 1 100% !important;
}
}
Hope this helps.
Hi again Jade,
I did the fixes above but the text is causing problems now. It takes over most of the footer and it isn’t responsive.
Best regards,
Pontus S
Hey Pontus,
To fix the text issue, inspect the Container that contains the text (see screenshot)
Under Flexbox settings, enable the Wrap option (see screenshot)
Let us know how this goes!
Hi,
Still having some problems. I removed the space that I had in the text as it looked weird. I also wrapped the container with the text and now it looks like this on Desktop:
And this on mobile:
Hello Pontus,
Can you please provide us with the admin access to your site in a Secure Note so that we can check your setup to see why the previous suggestion didn’t work:
Hello Pontus,
Thanks for providing the details.
From your current setup, please follow these steps:
#1. Edit container 2 settings then set the Self Flex option to No Shrink.
#2. Edit container 2’s customize options then set the Hide During Breakpoints in Mobile devices:
#3. Edit Bar 1’s customize setting then replace the current element CSS with this:
@media (max-width: 767px) {
$el.x-bar {
height: auto !important;
padding: 20px 0;
}
$el.x-bar $el.x-bar-content {
flex-direction: column !important;
flex: 1 1 100% !important;
height: auto !important;
}
}
Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.
Hope this helps.
Hi again,
Works great now. Thanks for the help!
You’re most welcome, Pontus.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
