Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 11, 2018 at 3:57 pm #955332
    mynick

    Hi guys,

    I’m working on a new project and I bumped into some issues. I think I’m finding ‘css selectors’ the wrong way. My ‘quick css’ feels so messy, but usually I get the job done.

    Anyways, I have 5 issues left that need fixing and I’m hoping you guys can help me out:

    1. FIXED

    2. Breadcrumb text line-height (is it called line-height? I mean the distance between the words )
    – Long words on mobile get terrible spacing.

    See screenshot

    3. FIXED

    4. FIXED

    5. Using a custom footer works perfectly, except on any page related to my blog ( = the blog page itself and the blog articles ). On those pages it creates an unnecessary white space.

    See screenshot

    ( screenshots bundled in imgur album )

    View post on imgur.com

    Kind regards

    • This topic was modified 6 years, 6 months ago by mynick.
    May 13, 2018 at 9:48 pm #956136
    Mike

    Hey jeroenvandessel,
    Sorry for the late reply, I took a look at your site:
    2 I looked at your breadcrumbs for mobile and the only thing that looked wrong was “U bevindt zich hier” I translated it to find it was 3 words “U is here” is this correct or should it have no spaces, sorry I don’t speak German.
    2018-05-13_152329
    3 your link to the page with no breadcrumbs does show breadcrumbs, please see screenshot above, I assume you fixed this?
    4 to show the breadcrumbs on category pages you need to make that setting at Enfold > Header > Header Layout > Header Title and Breadcrumbs I set it to “breadcrumbs only” for you but if you want to see the title also just change that setting.
    5 the white space you saw below the custom footer was actually the sidebar being pushed to the bottom, on this page I corrected it by choosing “no sidebar” in the layout for the page, please check and make the same change on your other pages.

    Best regards,
    Mike

    May 14, 2018 at 9:59 am #956329
    mynick

    Hi there,

    Thanks for helping me out! I managed to fix some things on my own or with your help. However 2 + 5 still need fixing. The solutions you provided are not what I’m looking for. Let me explain:

    2. When mobile screens are not wide enough the breadcrumb title becomes 2 lines. The space between these 2 lines is too big. So again, I’m talking about the vertical space between 2 lines. You don’t need to translate the content of my breadcrumbs hehehehe. I’m sure this could be fixed with some simple CSS changes.

    See screenshot in post#1

    5. There’s some unwanted whitespace under my footer. I know it’s because of the sidebar, but removing my sidebar is not the solution I’m looking for :D! Isn’t there something else we can do? It’s clearly a bug with the new footerpossibilties, I guess?

    Footer as page = bug ( whitespace under footer on blogpages )
    Default footer with colums = no bug

    Thanks again for helping me ;)! We’re almost there.

    May 14, 2018 at 1:16 pm #956422
    Mike

    Hi,
    2: Ok, I understand now, Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) {
.responsive .title_container .main-title + .breadcrumb {
    top: -14px !important; 
}
}

    please feel free to adjust to suit.
    I couldn’t check as your site seems down right now.

    Best regards,
    Mike

    May 14, 2018 at 2:22 pm #956466
    mynick

    Hi Mike,

    Seems like the website was down for a couple of minutes. Should be fixed now.

    Also I used the following code:

    @media only screen and (max-width: 767px) { .title_container .main-title {
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 10px;
} }

    I’m happy with the result now. I guess this is okay too? Please let me know if my method is unclean. I’d like to learn ;).

    Now all that needs fixing is footer :D

    May 15, 2018 at 3:21 am #956771
    Mike

    Hi,
    Your code is good, and would work fine, but since you asked, I would like to see it like this:

    @media only screen and (max-width: 767px) { 
   .title_container .main-title {
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 10px;
}
}

    it’s just easier to read :)
    As for your footer, I don’t see the error now, did you change it? I thought I saw the error at the url in the Private Content area?

    Best regards,
    Mike

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