Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #489800

    I want to make the content of blog page and single post page fullwidth on mobile without a sidebar. This is what i have until now but no luck:

    @media only screen and (max-width: 768px) {
    .single-post .content, .single-post #top .fullwidth .template-blog.content, .page-id-571 .content, .page-id-571 #top .fullwidth .template-blog.content {
    width: 100% !important;
    } }

    #490179

    Hey charliergarcia!

    You have following code in Quick CSS

    @media only screen and (max-width: 1340px) {
    .single-post .content, .single-post #top .fullwidth .template-blog.content, .page-id-571 .content, .page-id-571 #top .fullwidth .template-blog.content {
        width: 70% !important;
    }}

    please change it to following

    @media only screen and (max-width: 1340px) and (min-width: 769px) {
    .single-post .content, .single-post #top .fullwidth .template-blog.content, .page-id-571 .content, .page-id-571 #top .fullwidth .template-blog.content {
        width: 70% !important;
    }}

    Cheers!
    Yigit

    #490414

    Thanks Yigit!
    That made sense. Unfortunately, still no change on mobile. I also don´t want to display “menu-item-680” on single page but no luck either.

    #491169

    Hey,

    It looks like you still have the old code active somewhere, could you try to remove it please?

    @media only screen and (max-width: 1340px) {
    .single-post .content, .single-post #top .fullwidth .template-blog.content, .page-id-571 .content, .page-id-571 #top .fullwidth .template-blog.content {
        width: 70% !important;
    }}

    Best regards,
    Rikard

    #491600

    UPDATE: found this thread but the solution didn´t work for me.

    There´s something weird happening. It appears that my site it´s not loading the css changes I´ve made recently. I moved my site from a shared hosting to my own cloud server, I don´t know if there could be a problem related to this. This is my style.css form the child theme:

    /*
    Theme Name: Enfold Child
    Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
    Version: 1.0
    Author: Kriesi
    Author URI: http://kriesi.at
    Template: enfold
    */
    
    /* Every screen resolution*/
    
    .single-post #menu-item-517, .single-post #menu-item-520, .single-post #menu-item-521, .single-post #menu-item-622, .single-post #menu-item-519, .single-post #menu-item-680 { 
    display: none!important; 
    }
    
    .page-id-571 #menu-item-517, .page-id-571 #menu-item-520, .page-id-571 #menu-item-521, .page-id-571 #menu-item-622, .page-id-571 #menu-item-519 { 
    display: none; 
    }
    
    .post-entry .big-preview{ 
    display: none !important; 
    }
    
    li.avia-pricing-row small, .pricing-table li.avia-pricing-row { 
    font-size: 40px; 
    
    }
    
    .main_color .pricing-table.avia-highlight-col li.avia-heading-row, .main_color .pricing-table.avia-highlight-col li.avia-heading-row .pricing-extra { background-color: rgb(6, 93, 178); color: #ffffff; border-color: rgb(6, 93, 178); }
    .main_color .pricing-table.avia-highlight-col li.avia-pricing-row { background-color: rgb(0, 110, 255);
    color: #ffffff;
    border-color: rgb(0, 110, 255); }
    
    #menu-item-search {
    
    display:none;
    
    }
    
    /* END OF every screen resolution*/
    
    /*Big screens*/
    @media only screen and (min-width: 1341px) {
    div#mobilesld {
    display: none;
    }
    }
    /*END OF Big screens*/
    
    /*Ipad y Tablets*/
    @media only screen and (max-width: 1340px) and (min-width: 769px)  {
    
    .single-post .sidebar, .page-id-571 .sidebar {
    width: 30% !important;
    }
    .single-post .content, .single-post #top .fullwidth .template-blog.content, .page-id-571 .content, .page-id-571 #top .fullwidth .template-blog.content {
        width: 70% !important;
    }
    
    div#websld {
    display: none;
    }
    .pricing-table>li { 
    font-size: 12px; 
    }
    .responsive #scroll-top-link {
    display: block!important;
    }
    .iconbox .iconbox_content .iconbox_content_title { 
    font-size: 14px!important; overflow: visible!important; 
    }
    #top .iconbox_left_content .iconbox_icon, #top .iconbox_right_content .iconbox_icon {
    height: 40px;width: 40px;line-height:40px;
    }
    #top .iconbox_content p{
    font-size: 12px;
    }
    
    li.avia-pricing-row small, .pricing-table li.avia-pricing-row { 
    font-size: 30px; 
    }
    
    }
    /*END OF Ipad y Tablets*/
    
    /*smartphones*/
    
    @media only screen and (max-width: 768px) {
    
    .single-post .content, .single-post #top .fullwidth .template-blog.content, .page-id-571 .content, .page-id-571 #top .fullwidth .template-blog.content {
    width: 100% !important;
    }
    
    div#testimonials {
    display: none;
    }
    
    li.avia-pricing-row small, .pricing-table li.avia-pricing-row { 
    font-size: 25px; 
    }
    .iconbox .iconbox_content .iconbox_content_title {
     font-size: 11px!important; overflow: visible!important; 
    }
    
    .blogface .image-overlay {
    background: #d82028!important
    }
    .blogface .image-overlay .image-overlay-inside {
     display: none!important
    }
    
    .blog-categories.minor-meta, .text-sep.text-sep-cat, .blog-author.minor-meta {
    display: none!important;
    }
    }
    /*END OF para smartphones*/
    #491632

    Finally Found the Issue! it was with the Minify CSS feature of W3TC. it was loading a cached css file at /wp-content/cache/minify/000000/
    just so you keep in mind. This was a thicky one to track.
    Thanks!

    #492204

    Hey,

    Great, thanks for sharing your solution and glad you got it fixed :-)

    Regards,
    Rikard

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Single post page and blog page content width’ is closed to new replies.