Elements won't stay in place

Support
#1

Elements wont stay in place. See video above.

#2

Hello @piexec,

Thanks for reaching out. :slight_smile:

It looks like you haven’t assigned administrator access to the account. Please assign admin level access so that we can take a closer look at the setup.

Thanks.

#3

Ok. I updated to administrator. try it now.

#4

Hi @piexec,

I did what you did on your screencast and my edits are saved, it did not restore. Please take a look on your page now.



That screenshot is after I edit the page, exit on the builder and re-open it.

Probably this issue is only happening on your end, try clearing your browser’s cache or use the private/incognito mode of the browser where there are no caches and add-ons involve.

Thanks,

#5

Thank you.

Quick question:

What is the best practice to:

  1. Add space between columns when swithing to mobile?
  2. How do I make sure my buttons stay underneath the headlines during transitions to mobile?

See video for example: http://youtu.be/kQHfKAZ4jZM?hd=1

Thanks in advance!

#6

Hello @piexec,

You’re always welcome.

1.) There are multiple options available.
a.) Add GAP element either below or above the column as needed. Using HIDE BASED ON SCREEN WIDTH property, hide this on large screen size.
b.) Use of class. If you are familiar with inspecting element, and CSS this also a good choice. We will define a space on the bottom of a column using a class. Let say the class is mobile-padding

   @media(max-width:480px){
        .mobile-padding{
           padding-bottom: 20px !important;   /*Adjust this value as needed*/
}
}

Now, we can just add class mobile-margin on each column class field where you want a specific space.

2.) On the button element Customize Tab > Element CSS, try adding the followng:

  @media (max-width:767px){ /*Adjust 767 to your preferred screen width where this button will stay underneat headline*/
   $el.x-anchor.x-anchor-button {
    display: block;
    max-width: 300px; /*Change to your preferred width of the button*/
    margin: 0 auto;  /*To make the button center*/
  }
  }

Hope this helps.

#7

Hmm. I tried that. See video: http://youtu.be/upeNkkNvXoI?hd=1

What am I doing wrong?

#8

Hello @piexec,

The padding will be applied on the inside of the columns. If you want to have some space between the columns, you will need to use margin-bottom: 20px; instead.

Hope this helps. Please let us know how it goes.

#9

Ok I changed it. Still the same problem. Any ideas?

Thanks,

Mike

#10

Hi Mike,

You mean to add space between column? In that case, you should try bottom margin instead of bottom padding. Padding adds space between container and content. While margin should add spacing between containers.

   @media(max-width:480px){
        .mobile-padding{
           margin-bottom: 20px !important;   /*Adjust this value as needed*/
}
}

The CSS is works as intended, but maybe we’re expecting it differently.

Thanks!

#11

Yes, I need some space between the columns when it hits mobile. I tried the CSS you gave me, and still no space between the columns. What am I doing wrong?

#12

Hello @piexec,

Your css code will only work in mobile screen that is less than 480 pixels. Please have it updated and use this instead:

@media(max-width:767px){
   .mobile-padding{
     margin-bottom: 20px !important;   /*Adjust this value as needed*/
   }
}

This css code will add a bottom margin as soon as the columns collapse.

I went ahead and edited the page to save time for both of us.

Please check the page now.

#13

Thanks a million!!!

#14

How could I amend this css to force the colums to break at tablet size from 2 colums to 1?

#15

Hi @piexec,

In that case, please change that CSS to this

@media(max-width:979px){
.mobile-padding{
width: 100% !important;
float: none !Important;
margin: 0px 0px 20px !important;   /*Adjust this value as needed*/
}
}

It should collapse to one column for tablet down to mobile devices. BUT, if you’re targetting bigger tablet view then I recommend changing 979px to 1024px.

Thanks!

#16

Awesome that worked perfectly!

#17

Thanks for letting us know that it has worked for you.

#18

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