Tagged: ,

Viewing 30 posts - 1 through 30 (of 42 total)
1 2
  • Author
    Posts
  • January 17, 2017 at 4:43 pm #734799
    gorehalling

    Hi Enfold team and thanks for a great theme and awesome support.

    Question:
    I have three 1/3-columns which i’ve added a negative top margin to (-250px) to achieve the same effect that is presented in the Enfold Medical demo.
    This looks great in desktop view, but in mobile view the three columns end up on top of each other. If I remove the negative top margin, the columns present themselves as they should, after one another vertically.

    Thanks in advance!
    Br, gorehalling

    January 17, 2017 at 4:47 pm #734803
    Yigit

    Hey!

    Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your column elements which have negative top margins and give them a custom CSS class and then add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) { 
.your-custom-class { margin-top: 0!important; }}

    Best regards,
    Yigit

    January 17, 2017 at 5:28 pm #734836
    gorehalling

    Hi Yigit,
    that worked like a charm, thanks for the quick reply!

    Another question on the same topic:
    Is there a way(in mobile view) to prevent these columns with negative margin to overlap content that is in the color sections above and below.

    Br, gorehalling

    January 17, 2017 at 5:31 pm #734842
    Yigit

    Hey!

    Can you please post the link to your page and a screenshot showing the issue?
    You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.

    Regards,
    Yigit

    January 18, 2017 at 9:27 am #735201
    gorehalling

    Hi Yigit,

    here comes som screenshots of illustrations explaining the problem as well as a link to the page.

    Br, gorehalling

    January 22, 2017 at 10:06 am #736925
    Ismael

    Hi!

    I’m sorry but I can’t find that section in any page. Could you please provide a link or url to the actual page with the issue?

    Best regards,
    Ismael

    January 23, 2017 at 12:17 pm #737205
    gorehalling

    Sorry Ismael, wrong link :)

    Here goes:

    January 23, 2017 at 2:33 pm #737257
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .your-custom-class {
    margin-bottom: 0!important;
}

    Best regards,
    Yigit

    January 23, 2017 at 3:10 pm #737273
    gorehalling

    Hi Yigit,

    thanks for the reply, but no luck unfortunately. Things look as they should in desktop view but they still overlap the color sections above and below in mobile view.

    Anything I’ve missed?

    BR, gorehalling

    January 24, 2017 at 1:50 pm #737736
    Yigit

    Hi,

    Can you please switch user role to administrator?

    Best regards,
    Yigit

    January 24, 2017 at 3:20 pm #737783
    gorehalling

    Sorry forgot, now it’s done :)

    January 24, 2017 at 5:32 pm #737845
    Yigit

    Hi!

    I think your case the best would be hiding your section on mobile and replacing with another one which is made for mobile version of the theme that would be hidden on desktop – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Best regards,
    Yigit

    January 25, 2017 at 9:58 am #738222
    gorehalling

    Hi again Yigit,
    yeah – I guess you’re right. Might be easier to do it that way. But in that case I have a question:

    Is it possible to give an element multiple css-classes, or are they limited to only one css-class per element?

    Either way – thanks for your help so far!

    BR, gorehalling

    January 30, 2017 at 11:07 am #740128
    Ismael

    Hi,

    Yes, it’s possible. Just add a space between each class attribute.

    Best regards,
    Ismael

    July 14, 2017 at 1:44 pm #821144
    vdarend
    This reply has been marked as private.
    July 14, 2017 at 5:18 pm #821291
    Victoria

    Hi vdarend,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#av_section_1 {
      margin-top: -75px;
}

    But that section has an overlay with 0.5 opacity and you need to decide what to do with it.

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

    July 17, 2017 at 9:58 am #822447
    vdarend
    This reply has been marked as private.
    July 17, 2017 at 10:17 am #822470
    vdarend
    This reply has been marked as private.
    July 17, 2017 at 5:42 pm #822769
    Victoria

    Hi vdarend,

    Not sure I understand, what you’re referring to. Do you have a screenshot?

    Best regards,
    Victoria

    July 17, 2017 at 10:44 pm #822981
    vdarend
    This reply has been marked as private.
    July 18, 2017 at 8:50 am #823144
    vdarend
    This reply has been marked as private.
    July 19, 2017 at 3:49 pm #824039
    Victoria

    Hi vdarend,

    I see the websites and do not see screenshots of your issues. Could you please reattach those?

    Best regards,
    Victoria

    August 9, 2017 at 11:15 am #836289
    vdarend
    This reply has been marked as private.
    August 15, 2017 at 9:12 am #839116
    Ismael

    Hi,

    Thank you for the update.

    Please add the following css modification in the Quick CSS field. It will remove the top margin on mobile view.

    @media only screen and (max-width: 989px) {
  /* Add your Mobile Styles here */
  #diepvrieswarehouse .flex_column_table {
    margin-top: 0 !important;
  }
}

    Best regards,
    Ismael

    August 15, 2017 at 11:02 am #839182
    vdarend
    This reply has been marked as private.
    August 15, 2017 at 11:35 am #839202
    Victoria

    Hi Pim,

    Seem to work. Here is what I see http://imgur.com/a/ShyEN, the same on my mobile. Could you please clear the cache or check on different mobile device, check again and get back to us.

    Best regards,
    Victoria

    August 15, 2017 at 11:52 am #839212
    vdarend
    This reply has been marked as private.
    August 16, 2017 at 7:27 am #839731
    Ismael

    Hi,

    Please add a unique Section ID to the color section that contains the columns then use the css code that we provided above. Just replace the “#diepvrieswarehouse” selector with the custom Section ID.

    @media only screen and (max-width: 989px) {
  /* Add your Mobile Styles here */
  #YOURSECTIONIDHERE.flex_column_table {
    margin-top: 0 !important;
  }
}

    Best regards,
    Ismael

    August 22, 2017 at 11:16 am #842419
    vdarend
    This reply has been marked as private.
    August 22, 2017 at 1:31 pm #842531
    Victoria

    Hi vdarend,

    It looks fine on mobile. Could you please clear the cache, try on another mobile device, check again and get back to us.

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

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 42 total)
1 2
  • The topic ‘Negative margins on columns on mobile device’ is closed to new replies.