Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 2, 2016 at 4:24 pm #642136
    changegroup

    Hi team enfold,

    We have issues with whitespace on mobile. In particular with the sidebar and on single blog posts:

    1. Sidebar – we use sidebar on all pages and blogs related to our Investor Relations: http://www.changegroup.dk/investor-relations/ but on mobile the sidebar is at the bottom on the page/blog, but there is to much space between the content and the sidebar.
    How can we reduce this?

    2. Single blog posts: there is too much space between the top image and the special heading (obs in between the top image and the heading is a code-element with a data). We already use this code to reduce whitespace on mobile, but it seems to only work on pages and not single blog posts:

    @media only screen and (max-width: 989px) { 
.hr-invisible { display: none; }
}

    How can we reduce the whitespace?

    Layout of pages:

    - Layout element with top image
- Whitespace with -50
- Special Heading

    Layout of single blog posts:

    - Layout element with top image
- Whitespace with +10
- Code Block with date
- Whitespace with -50
- Special Heading
    June 3, 2016 at 7:18 am #642421
    Rikard

    Hi changegroup,

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

    1. 

    @media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small {
margin-bottom:0 !important;
}
}

    2. 

    @media only screen and (max-width: 767px) {
.single .av-special-heading {
margin-top: 20px !important;
}
}

    Regards,
    Rikard

    June 6, 2016 at 9:05 am #643359
    changegroup

    Hi Rikard

    Thanks. Seems to work perfectly.

    Though in terms of 1:

    @media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small {
margin-bottom:0 !important;
}
}

    Is it possible to make the white-space on mobile even smaller?

    Br
    ChangeGroup

    June 7, 2016 at 5:14 am #643771
    Rikard

    Hi,

    You could try setting a negative margin like so:

    @media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small {
margin-bottom:-20px !important;
}
}

    Best regards,
    Rikard

    June 8, 2016 at 1:29 pm #644804
    changegroup

    Hi Rikard,

    Thank you very much! That worked.

    BUT… I realized that the above styling also influences my front pages etc.. But I only want this change to occur on pages and posts related to http://www.changegroup.dk/investor-relations/

    This means:
    – Investor Relations
    – Meddelelser
    — Post: Fra salgschef til bestyrelsesmedlem i ChangeGroup
    — Post: Kvartalsrapport: 34 millioner fra årsmålet
    — Post: Forsikringsselskabet If indgår aftale med ChangeGroup
    — Post: Ledelsesberetning: Tallene taler for sig selv i 2015
    — Post: DONG Energy peger også på ChangeGroup
    – Nøgletal
    – Ejerstruktur
    – Bestyrelse
    – Kontakt IR

    Does this mean that I have to get the above page and post IDs to include this in the CSS styling?

    And how do I do this? Is it better to use the category ID for posts, as all the above posts and future posts, that need this styling, will be in the same category?

    Hope this makes sense!

    Br
    ChangeGroup

    June 9, 2016 at 6:58 am #645248
    Rikard

    Hi,

    You could go for the option of adding the page id to the CSS, but I think it would be easier if you gave the element in question a custom CSS class, you can activate that function by following this: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/. You can then add something like this to your Quick CSS: 

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

    Thanks,
    Rikard

    August 31, 2016 at 12:29 pm #679920
    changegroup

    Perfect. Thank you Rikard!!

    Sorry for late reply, due to vacation :)

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Whitespace on mobile’ is closed to new replies.