Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 23, 2014 at 8:31 pm #282654
    rkap

    I created 4 layout elements (1/4) within a color section. The Responsive behavior causes the elements in the color section to wrap (1 per row) when viewing on smaller resolutions, creating an odd look whereby it dominates the majority of the screen on mobile and low-resolution screens. I’d rather have the elements shrink padding and the contents themselves (1/4 layout elements contain single Icon element).

    Is something like this possible?

    Thanks!

    June 23, 2014 at 8:35 pm #282659
    Yigit

    Hey rkap!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 990px) { 
.page-id-27 div#av_section_1 .av_one_fourth {
width: 25%!important;
}}

    Regards,
    Yigit

    June 23, 2014 at 8:45 pm #282666
    rkap

    Hi Yigit,

    I have made the update, and it seems to be a step in the right direction, but the Icons seem to run into each other and the color section height seems disproportionately large when viewing on mobile. Do you see the same on your side?

    Thanks!

    June 23, 2014 at 10:42 pm #282728
    rkap

    So I’ve tried several different CSS options and I’m not able to make it look just like I want (have it resize smaller as the resolution gets smaller). An element that does this is the slider element. It resizes the content perfectly.

    On my site, I’m trying to use the color section and multiple icons as a navigation bar. Is there a better way to achieve my goal of an icon-based nav bar, other than what I’m trying to do?

    June 24, 2014 at 8:22 am #282859
    Ismael

    Hey!

    Thank you for the update.

    You can create two color sections with the same content. Make the icons and text on the second color section a little bit smaller. Use media queries to hide the second color section and show the the first color section on desktop view and vice versa. First, duplicate the current color section then edit it. Look for the For Developers: Section ID field, call it icon-menu-one for example. After that, edit the second color section, make the text and icons smaller, call it icon-menu-two. Add this on Quick CSS or custom.css:

    @media only screen and (min-width: 990px) {
  #icon-menu-one {
  display: block;
 }

 #icon-menu-two {
  display: none;
 }
}

@media only screen and (max-width: 989px) {
 #icon-menu-two {
  display: block;
 }

 #icon-menu-one {
  display: none;
 }
}

    Regards,
    Ismael

    June 26, 2014 at 6:52 pm #284220
    rkap

    Thanks, it looks like that will work!

    June 26, 2014 at 7:15 pm #284238
    Yigit

    Hey!

    Please try and let us know so we can mark the thread as resolved or assist you further!

    Cheers!
    Yigit

    June 26, 2014 at 10:37 pm #284319
    rkap

    Yes, go ahead and mark it complete. Thanks.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Disable Wrapping in Color Section’ is closed to new replies.