This topic is: not resolved

Page Title

  • jcpdowntown
    Participant
    Post count: 14
    # 4 years, 5 months ago

    On mobile devices, page titles are currently getting cut off in the middle of a word, rather than at the end of a word as you will see in attached screenshot. Please advise as to how to adjust this.
    http://jcpdowntown.org/start/

    Author
    Keymaster
    Post count: 26678
    # 4 years, 5 months ago

    Hi there

    Use custom css at Theme Options > Custom CSS/JS
    .page-banner-text h1, .page-banner-text p{word-break:normal}

    Thanks

    jcpdowntown
    Participant
    Post count: 14
    # 4 years, 5 months ago

    Thank you
    Two more questions related to this:

    1) if i want to see the photo full size (albeit smaller) is there a way to do that?
    2) If i want to move the page title and breadcrumb below the image, is that possible?

    Author
    Keymaster
    Post count: 26678
    # 4 years, 5 months ago

    1. To see full image in smaller height of banner is possible but that way it won’t cover the full width of the screen just show the image in the center.

    2. To do the following changes on this page only http://jcpdowntown.org/start/ use custom css:

    .page-id-1046 .content{padding-top:100px!important}
    .page-id-1046 .page-banner-text > div{height:auto!important}
    .page-id-1046 .page-banner-text{position:absolute;bottom:-120px}

    Thanks

    jcpdowntown
    Participant
    Post count: 14
    # 4 years, 5 months ago

    Thanks – successfully launched that on all pages.
    a couple of related questions:

    1) one http://jcpdowntown.org/jewish-life/shabbat-holidays/high-holidays/ where the page title and breadcrumb are hidden, there is now padding at top. anything i can do here?
    2) What is the proper css to put additional padding above and below title/breadcrumb, and to place a 1px bottom border below?
    3) is it possible to replace the homepage title in the breadcrumb with an icon?

    Author
    Keymaster
    Post count: 26678
    # 4 years, 5 months ago

    1. You can use page unique class(can be found on the body tag in the page source code) liek this:
    .page-id-1026 .content{padding-top:60px!important; border-top:0; margin-top:0}

    2. You can use custom css
    .content {border-top: 1px solid #eee; margin-top: 120px; padding-top: 60px !important;}
    .page-banner-text{bottom:-130px}

    3. You can change the Home template at Settings => Breadcrumb NavXT
    http://drops.imithemes.com/JkpaAK
    replace code <span property="name">%htitle%</span>
    TO:
    <i class="fa fa-home"></i>

    Thanks

    jcpdowntown
    Participant
    Post count: 14
    # 4 years, 5 months ago

    Almost there –
    please see attached screenshot; the page is going wider than it should be and the title is touching some of the photo.

    additionally, is it possible on mobile to display the page header image at 100%?

    Author
    Keymaster
    Post count: 26678
    # 4 years, 5 months ago

    Use custom css:
    @media only screen and (max-width: 767px){
    .page-banner{height:150px!important;}
    .page-banner .page-banner-text h1{font-size:24px}
    }

    Thanks

    jcpdowntown
    Participant
    Post count: 14
    # 4 years, 5 months ago

    Thanks – all helpful!
    can you provide fix to hide the breadcrumb on mobile?

    Author
    Keymaster
    Post count: 26678
    # 4 years, 5 months ago

    Use custom css:
    @media only screen and (max-width: 767px){
    .page-banner .breadcrumb{display:none}
    }

    Thanks

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.