Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 26, 2015 at 2:38 am #464739
    mrivanp

    As there anyway of switching to mobile mode sooner? Support i have two equal columns – on mobile mode it puts the right column undernearth the left column. Anyway of doing this at a different width? ie on ipad in portrait mode? See private content for more details

    June 28, 2015 at 7:27 am #465433
    Ismael

    Hi mrivanp!

    Thank you for using Enfold.

    Please try to add this in the Quick CSS field to change the width of the columns on mobile device:

    @media only screen and (max-width: 767px) {
div .av_one_half {
  margin-left: 6%;
  width: 47%;
}}

    Cheers!
    Ismael

    June 28, 2015 at 8:27 am #465463
    mrivanp

    But this isn’t what I am saying.
    I am simply want the columns to go underneath each other at an earlier breakpoint.
    Right now my site looks great on phones (because columns are underneath each other) but not good on ipad portrait mode (because they are not).

    HOw can i make it so that at a high width than is currenty set, the columns go underneath one another. (assuming you have two columns side by side)

    June 30, 2015 at 1:41 pm #466377
    Josue

    Hi!

    Copy this to Quick CSS:

    @media only screen and (max-width: 989px) {
	
  .responsive .boxed #wrap_all { overflow: hidden; /*needed for mobile menu scrolling */ }
  .responsive #top { overflow-x: hidden; }
  .responsive .boxed#top, .responsive #top.boxed .stretch_full , 
  .responsive.html_boxed.html_header_sticky #header,
  .responsive.html_boxed.html_header_transparency div #header{ width: 100%; max-width: 100%; }
  
  .responsive #top #wrap_all .container {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
    padding-left:0;
    padding-right:0;
    float:none;
  }
  .responsive .units, .responsive .unit {
    margin: 0;
  }
  
  .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
  }
  
  .responsive #top #wrap_all .av-flex-cells .no_margin{
	  display: block;
	  margin: 0;
	  height:auto !important;
	  overflow: hidden;
	  padding-left:8% !important;
	  padding-right:8% !important;
  }
  
  .responsive #top #wrap_all .av-flex-cells .no_margin .flex_cell_inner{
	    width: 100%;
		max-width: 100%;
		margin: 0 auto;  
  }
  
  .responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding{
	  padding-left:0% !important;
	  padding-right:0% !important;
  }
  
  .responsive #top #wrap_all .flex_column:empty{margin:0;}
}

    Best regards,
    Josue

    December 20, 2016 at 11:35 am #726506
    seanchk

    Hi Josue,

    I have tried this and it works except for one problem. I have some grid row cells that are marked to not display on mobile. With this CSS the elements adapt as if on mobile but the elements that I want to disappear on mobile are still there.

    How do I fix that?

    Thanks

    Sean

    December 24, 2016 at 12:36 pm #728134
    Andy

    Hi,

    try to add an !important yo your code which hides the element on mobile. So something like this:

    .for-mobile {
display: none !important;
}

    Best regards,
    Andy

    June 15, 2017 at 9:45 am #808471
    dianado

    Hi All

    I’d like some help too with displaying the mobile menu sooner, at a breakpoint of around 1150px.
    I’m wanting to display the search button on the menu bar also, which I’ve achieved at a breakpoint of 989px. I’d like both search button and hamburger menu to appear at the larger breakpoint (1150px), yet when I fiddle around with the max-width things just don’t work as planned.

    Would you be able to take a look? Links supplied.

    Many thanks
    Diana

    June 15, 2017 at 1:09 pm #808550
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1150px) {
nav.main_menu {
  display:none !important;
}
#advanced_menu_toggle, #advanced_menu_hide {
  display:block !important;
}
}

    Best regards,
    Rikard

    June 16, 2017 at 4:47 am #808795
    dianado

    Hi Rikard

    Thanks for that. It sorted out the hamburger menu nicely. I just have to work out how to make the Search icon appear alongside it now.

    Thanks to all the team at Enfold for such amazing community support.

    Diana

    June 17, 2017 at 8:21 pm #809365
    Mike

    Hi,
    Try this for a search on your mobile: https://kriesi.at/support/topic/search-icon-on-mobile-3/#post-770932

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.