Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 7, 2016 at 6:15 pm #721628
    dannywouters21

    For the page title and breadcrumb are I have a background image and increased font size of the title ( you guys provided the custom css, thank you)

    For pages viewed on mobile phone, the title and breadcrumb wraps around and exceeds the title image height if titles are long, so it looks bad. please see images:

    desktop looks good:http://mrf-furnaces.com/wp4/wp-content/uploads/2016/12/enfold-title-area-desktop.jpg
    tablet looks good:http://mrf-furnaces.com/wp4/wp-content/uploads/2016/12/enfold-title-area-tablet.jpg
    Mobile phone looks bad:http://mrf-furnaces.com/wp4/wp-content/uploads/2016/12/enfold-title-area-mobile.jpg

    Is there a way fix it so it looks good on Mobile also?

    Existing custom css for title area is this

    .title_container {min-height: 111px !important;background-image: url("http://mrf-furnaces.com/wp4/wp-content/uploads/2016/10/background1200x111-grey.jpg"); }
.title_container { background-color: transparent!important;}
.title_container .main-title{font-size: 30px !important;}

    Thank you!

    December 11, 2016 at 5:56 am #722774
    Ismael

    Hey dannywouters21,

    Thank you for using Enfold.

    The background image is repeating. Please use this css code.

    .title_container {
    min-height: 111px !important;
    background-image: url(//mrf-furnaces.com/wp4/wp-content/uploads/2016/10/background1200x111-grey.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

    Or use another background image for mobile.

    Best regards,
    Ismael

    December 11, 2016 at 11:37 pm #722872
    dannywouters21

    Thanks Ismael that is a great improvement :)
    Now the text still needs some changes, title and breadcrumb overlap in some screen sizes, and the line spacing for the title is too large. See screenshots.
    text overlap: http://mrf-furnaces.com/wp4/wp-content/uploads/2016/12/title-overlap.jpg
    title wrapping too much height http://mrf-furnaces.com/wp4/wp-content/uploads/2016/12/title-line-spacing.jpg

    I tried this but that didn’t work

     .main-title{font-size: 30px !important;
line-height: .7 !important}

    Can you help me to fix this issue? Thank you!

    December 13, 2016 at 3:53 pm #723767
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px) {
.title_container .main-title {
    line-height: 30px;
    margin-bottom: 10px;
}}
@media only screen and (max-width: 990px) and (min-width: 481px) {
.title_container .breadcrumb {
    left: 50px;
    top: 90%;
}}

    Best regards,
    Yigit

    December 13, 2016 at 4:37 pm #723799
    dannywouters21

    I added it to custom CSS but it didn’t change anything, Cleared cache and reloaded CTRL + F5.

    any ideas?
    Thank you.

    December 13, 2016 at 4:40 pm #723804
    Yigit

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Yigit

    December 13, 2016 at 4:57 pm #723815
    dannywouters21

    here you go :)

    December 13, 2016 at 5:07 pm #723825
    Yigit

    Hi!

    I flushed cache in Total Cache and flushed browser cache and it does work fine on my end :)

    Regards,
    Yigit

    December 13, 2016 at 5:23 pm #723842
    dannywouters21

    I only cleared cache of the one page I was checking, should have cleared it all.. sorry about that. Thanks for the help!, Looks good now :)

    December 13, 2016 at 5:27 pm #723850
    Yigit

    Hey!

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘title area sizing issue on mobile’ is closed to new replies.