Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • July 4, 2018 at 5:37 am #980914
    Eagles1227

    Support,

    I notice when I have a column layout (In my particular case, 1/4) and select “No Space Between Column”, the layout breaks when the browser is scaled down. See private for links and images.

    I have disabled plugins and deleted all of my custom css – still have the issue.

    Thank you so much!

    July 4, 2018 at 3:45 pm #981272
    Nikko

    Hey Eagles1227,

    Thanks for giving us those screenshots, it helps a lot :)
    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width: 989px) and (min-width: 768px) {
  .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div {
    clear: none !important;
  }
}

    Best regards,
    Nikko

    July 4, 2018 at 6:25 pm #981313
    Eagles1227

    With your dedication to your customers and excellent support, I try to make it easy on you! So on behalf of all of us customers: thank you!

    Nope, that unfortunately doesn’t work. I have left the page as-is with the css and you’ll see that it keeps the four columns rather than breaking them into two columns. Please see my private content.

    July 6, 2018 at 9:08 am #981918
    Nikko

    Hi Eagles1227,

    Can you remove the code I gave and replace it with this code instead:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
  #top #wrap_all .av_one_fourth {
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
  }
}

    This should make it 2 columns instead of 4. Let us know if it helps.

    Best regards,
    Nikko

    July 6, 2018 at 6:08 pm #982159
    Eagles1227

    Another one, please :)

    See private

    • This reply was modified 5 years, 10 months ago by Eagles1227.
    July 6, 2018 at 9:52 pm #982237
    Eagles1227

    Also, on a side note…do you know of a good tutorial on how to find the proper css to target? For example, when do you use .responsive, #top, #wrap-all, so on and so forth. I know it’s probably a stupid request, but I’d love to learn!

    I used the ‘inspect’ tool on Chrome but I couldn’t quite figure it out. I inserted code which ONLY worked when I would refresh the page, but it wouldn’t work when used as responsive. So, ignorant enough, I added .responsive to the front and it still didn’t work.

    If Enfold has a video on this, that would be great!

    Thanks again for all of your help!

    July 7, 2018 at 2:05 pm #982456
    Victoria

    Hi Eagles1227,

    It is the css knowledge in general and so not theme related, there are plenty of materials online.

    They seem to be aligned in the middle. Do you need them to look different?
    Could you please attach a mockup of what you’re trying to achieve?

    If you need further assistance please let us know.
    Best regards,
    Victoria

    July 7, 2018 at 8:56 pm #982571
    Eagles1227

    In the image provided, I’d like the “Corporate Headquarters” and “Contact Information” to be next to each other (1/2, 1/2) between 768px and 989px since it jumps to a 1/1 Layout.

    July 7, 2018 at 10:07 pm #982592
    Mike

    Hi,
    I understand that you would like the “Corporate Headquarters” and “Contact Information” to be next to each other (1/2, 1/2) between 768px and 989px, and I assume that you wish for the contact form to be 100% wide.
    Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
 .responsive #top.page-id-26 .avia-builder-el-23 {
width: 48% !important;
float:left !important;
}
.responsive #top.page-id-26 .avia-builder-el-26 {
width: 48% !important;
float:right !important;
}
}

    Although this css works, it would be best if you add a custom class to each of the 1/4 columns, such as “column-left” & “column-right” and replace the “avia-builder-el-23” & “avia-builder-el-26” because these may change if you edit the page again.
    To enable custom classes go to: Enfold Theme Options > Layout Builder > Show element options for developers

    Best regards,
    Mike

    July 7, 2018 at 10:25 pm #982597
    Eagles1227

    Thank you so much, Mike!! I am pretty familiar with most of this except targeting the proper class/id. I’m learning, though. Thank you again!

    July 7, 2018 at 11:29 pm #982607
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Column Layout Issue: "No Space Between Column"’ is closed to new replies.