[Resolved] I want to display the post in 2 columns on mobile and 3 on tablet

Home Forums Support [Resolved] I want to display the post in 2 columns on mobile and 3 on tablet

Home Forums Support I want to display the post in 2 columns on mobile and 3 on tablet

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1664738
    Chetan

    I want to display the post in 2 columns on mobile and 3 on tablet

    desktop

    https://ibb.co/NKzqWQ2

    mobile

    https://ibb.co/GWGBjq7

    and also tell me how can I differentiate it on Archives and on Single Post cuz when i add any css it also affects the single page

    .separate-containers .inside-article {
    	padding:0px;
    }
    
    .post-image-above-header .inside-article .post-image {
    	margin-bottom:0px;
    }
    
    .entry-title {
      padding-bottom: 15px;
    	padding-left:15px;
    	padding-right:15px;
    }
    
    .entry-summary:not(:first-child), footer.entry-meta {
    	margin-top:0px;
    }
    
    h2.entry-title {
    	font-size:20px;
    	text-align:center;
    }
    #1664841
    Ying
    Staff
    Customer Support

    Hi Chetan,

    Set it to 4 columns in customzier > layout > blog.
    Then add this CSS:

    /*tablet*/
    @media (min-width: 768px) and (max-width: 1024px) {
        .generate-columns.tablet-grid-50, .grid-sizer.tablet-grid-50 {
            width: 33%;
        }
    }
    /*mobile*/
    @media (max-width: 767px) {
        .generate-columns.mobile-grid-100, .grid-sizer.mobile-grid-100 {
            width: 50%;
        }
    }

    In order to make CSS only targets archives, add this selector before your other selectors: .archive

    #1666196
    Chetan

    I did as you said and it worked but in some of the archive pages the gaps are not proper

    Image has the resolution of 720×1280

    Like in the below image
    Screenshot-221

    https://ibb.co/wWv1tjG

    And this one is proper
    Screenshot-222

    https://ibb.co/fSHZSdS

    #1666913
    Leo
    Staff
    Customer Support

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know ๐Ÿ™‚

    #1667523
    Chetan

    Site Name

    #1668094
    Ying
    Staff
    Customer Support

    Edited CSS here ๐Ÿ™‚

    /*tablet*/
    @media (min-width: 768px) and (max-width: 1024px) {
        .generate-columns.tablet-grid-50, .grid-sizer.tablet-grid-50 {
            width: 33%;
        }
    }
    /*mobile*/
    @media (max-width: 767px) {
        .generate-columns.mobile-grid-100, .grid-sizer.mobile-grid-100 {
            width: calc(50% - 5px);
            padding-left: 10px;
        }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.