Icon Indent Footer Columns

Support
#1

Notice the blue icons in the black area…

https://alliancepropertysystems.com/careers/

What is the best way to implement that here…

https://dev.alliancepropertysystems.com/

#2

Hello @verobeachmarketing,

Thanks for writing in!

To resolve your issue, please go to Pro > Global Blocks and create a global block. In your layout, add a section, row and columns. Make use of the classic feature box or classic feature list element to have the icon and the address next to it.

Once you are done with it, you will have to insert the global element into your footer.

Hope this makes sense.

#3

This is great. Thanks for teaching me something new. Can you tell me how to make the column text not wrap? Also how to make the 3rd column to wrap under on mobile? 2nd column wrap under map? obviously wanting this responsive.

#4

Hello,

Great question! You can do it by using Media Queries. Here are the steps:

  1. Pro > Footers
  2. Edit the footer used on this page
  3. Inspect the Bar that contains the “containers” (the three columns)
  4. While Inspecting the Bar, click the Customize tab
  5. Click Element CSS
  6. Then assuming you want to make the columns stack on top of each other at 767px (small devices), use this code:
@media(max-width:767px){
   $el.x-bar-content{
     max-width:300px;
     flex-wrap:wrap;
   }
}

Do note that you can change the value of max-width. I just used 300px as an example.

I hope this helps.

#5

This works great, thank you so much.

#6

You’re welcome!
It’s good to know that it has worked for you.

#7

Do you know how to get some margin on the top of the map on mobile?

#8

I got this resolved. Please disregard.

#9

Hey @verobeachmarketing,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.