Posts, how to set to Full Width

Home › Forums › Jevelin Theme › Posts, how to set to Full Width

Home › Forums › Jevelin Theme › Posts, how to set to Full Width

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    RESOLVED Posts

  • Marcin Gora
    Participant

    Hi Team,
    Hope you are doing fine.
    I’m struggling to get my Posts to be visible as Full Width. I’m not able to find such an option as it is for Pages. I have all Sections under Posts set to Full Width, but still Posts have margins on the left and right + white background of title.
    My page has a grey background (#262626). All works fine for Pages, where I can set Full Width in Page settings and put grey background for all Sections.

    In Appearance > Blog > Post Setting there is no Full Width option.
    I’m I missing to fine this one toggle, to get this all set? 🙂

    Where can I find setting to change Posts layout from Default to Full Width?

     

    Thanks a lot for help!

     

    /Marcin

     

    I’m sharing as well links to Posts and to Pages where grey background works fine with Full Width page.

    Shufflehound
    Moderator

    Hi there,

     

    Can you please give us a link to your website, so we can see your current progress? (you can add link in private field)

     

    Best regards,

    Shufflehound team

    Marcin Gora
    Participant

    Hi,

     

    I’m sharing link to one of the Posts and Page (in private content).

     

    Thanks

    Shufflehound Support
    Moderator

    Solution for this topic

    You can make the posts full width by adding the following CSS code in the Custom CSS code option of your theme on the below path.

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    body.single-post .container.entry-content {
    width: 100% !important;
    max-width: 100% !important;
}
body.single-post .content-container {
    background: #262626;
}
body.single-post .post-container a.post-title,
body.single-post .post-container .post-meta-data,
body.single-post .post-container .sh-section-container.container-fluid  {
    max-width: 1200px!important;
    width: 1200px!important;
    margin: 0 auto;
    display: block;
    border-bottom: 0;
}

    Marcin Gora
    Participant

    Thank you very much for your help! All looks now as I wanted to.

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

    Marcin Gora
    Participant

    Hi Guys, I found one issue with solution that you provided.
    Posts are no longer responsive. Either on mobile devices but also on PC browsers.
    Is there any other solution that you  can provide?
    Thanks,
    Marcin

    Shufflehound Support
    Moderator

    Solution for this topic

    Could you please try using below CSS code instead of above shared CSS code?

     

    @media (min-width: 800px){
body.single-post .container.entry-content {
    width: 100% !important;
    max-width: 100% !important;
}
body.single-post .content-container {
    background: #262626;
}
body.single-post .post-container a.post-title,
body.single-post .post-container .post-meta-data,
body.single-post .post-container .sh-section-container.container-fluid  {
    max-width: 1200px!important;
    width: 1200px!important;
    margin: 0 auto;
    display: block;
    border-bottom: 0;
}

}

    Marcin Gora
    Participant

    Hi, thanks for your time. Yes, that improved behaviors on mobile devices.

    Still I can see that background color under posts not overwrites to my color code #262626. Seems that there is on higher hierarchy other grey color. See screenshots from iPhone Safari.
    Works fine on PC Chrome and IE but not on iPhone. All Pages on iPhone display properly background color #262626.

     

    Is there any other place I need to overwrite color settings to #262626?

     

    Thanks!

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    It is a body background color that you can change from theme styling settings as shown in the attached screenshot.

    Attachments:
    You must be logged in to view attached files.

    Marcin Gora
    Participant

    Hello. I’ve changed body background as suggested. Unfortunately as a result header (in top position) lost transparency (see screenshot). When I scroll down, all looks fine with header.
    Do I need to change some other setting to get this corrected?
    Thanks for answer.

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Please try using below custom CSS code to resolve menu background transparency issue.

     

    
.sh-header:not(.sh-header-4):not(.sh-header-5):not(.sh-header-6) .sh-nav > li.menu-item > a {
    background: transparent !Important;
}

    Marcin Gora
    Participant

    Thank you for quick reply.
    I’ve addd this custom CSS codes under
    <p style=”margin-top: 0pt; margin-bottom: 1pt; font-family: Calibri; font-size: 10.5pt; color: #393939;”><span style=”background: white;”>Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

    </span></p>
    <p style=”margin-top: 0pt; margin-bottom: 1pt; font-family: Calibri; font-size: 10.5pt; color: #393939;”>Look it fixed issue with transparency under PC web browser (Chrome).
    Under mobile browser (iPhone Safari / Chrome), icon for hamburger menu still has this gray background. I’m using Header 8. Any other specific code change is required for mobile?</p>
    <p style=”margin-top: 0pt; margin-bottom: 1pt; font-family: Calibri; font-size: 10.5pt; color: #393939;”></p>

    Shufflehound Support
    Moderator

    Yes please use the below CSS code for mobile menu button.

     

    html .menu-item a {
    background: transparent !important;
}

    Marcin Gora
    Participant

    Perfect, you are the best! All works now with header transparency (both PC and mobile browsers)

    Just last one in this topic.
    When I enable Sticky Mobile Header and scrolling down on mobile device it is showing only white background, no logo or hamburger menu is appearing. When I scroll back to the top of the page transparent header is back with logo and menu. How to get this fixed?

    Shufflehound Support
    Moderator

    Use the below CSS code to resolve this issue.

     

    header.primary-mobile .sh-sticky-mobile-header-active {
    background-color: #262626!important;
}

    Marcin Gora
    Participant

    All works now, many thanks! 🙂

    Shufflehound Support
    Moderator

    You are always welcome here 🙂

    Marcin Gora
    Participant

    Hi Guys,

    I have now few custom CSS codes that are applied for my website.
    Related to width of posts, mobile sticky background etc. All that you
    have provided solutions for me here. Again big thanks for that! 🙂
    Which is better from performance perspective or you best practice?
    Shall I add all custom code under Admin Area -> Appearance
    -> Theme Settings -> Custom Code -> CSS Code.
    Or shall I do that in different way, so edit/add code, I guess all is under style.css >> Jevelin folder? Shall I add those custom codes in specific places?

    Below ones that I found on support forum, seems to be not working
    for me when pasting under Theme Settings -> Custom Code -> CSS Code.

    Post, remove name of author

    .page-template-page-blog span.post-meta-author {
    display: none;
    }

    Post, hide tags

    .blog-single .sh-blog-tags {
    display: none;
    }

    I would like to remove as well post titles. Can you provide me here as well custom code for this or shall I set a new topic?

    Thank you!
    Marcin

    Shufflehound Support
    Moderator

    I would like to remove as well post titles. Can you provide me here as well custom code for this or shall I set a new topic?

    Yes please create a new topic for each of your questions.

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)