#128949 Grid layout

Landing Forums Jupiter WordPress Theme Grid layout

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • Robert Helle

    Hi.

    I am trying to solve two issues, but I can not find a solution.

    1. I added date and author on a grid that shows posts. Ive put them in 2 columns below the featured image. On computers it looks fine. However on mobiles date is on one line and author on the next with a huge padding inbetween them. Could you help me find a solution. How I would like it to look (from pc): https://snipboard.io/BRQD9g.jpg. How it looks (mobile per now): https://snipboard.io/yqMvZD.jpg
    2. On mobile on a new front page I am creating, the same grid shows different featured image sizes on mobile, but noe on computers. Its weird cause on the rest of the website the same grid seems to look fine. See the same screenshot from mobile as above.

    Appreciate your support very much, Thanks.  omhelse.no

    Amir Rather Support Team

    Hi There

    I added the below CSS in the Page Section Custom CSS:

    @media handheld, only screen and (max-width: 768px){
    .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_author {
        float: right;
        margin-top: -12px;
    }
    .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_date {
        width: 50%;
        float: left;
    }}

    Regards

    Robert Helle

    Nice. Thanks.

    Robert Helle

    Did you see question number 2 as well?

    Alexander Hutsol Support Team

    Hello,

     

    You have this code in Theme Options > Advanced > Custom CSS in line 50 that is causing the issue:

    .vc_grid-item.vc_clearfix.vc_col-sm-3 {
    float: left !important;
    }

    If you comment it out, the images sizes will be fine on mobile.

     

    Regards.

    Robert Helle

    Ah ok. What does this css do? If I remove it what other problem may that cause?

    Alexander Hutsol Support Team

    Hello,

     

    When I remove the code, no issues occur.

    So I think you can comment it out.

     

    Thank you.

    Regards.

    Robert Helle

    Have you checked all over the website? Cause there is a reason it was put there in the first place. Do you know what it does?

    Robert Helle

    Anyway seems fine now. I saved it for later in case it causes any issues when removing it.  There is one more small thing abour question 1:

    There now is a big padding between the line with the date and author and the post title. Can you help med decrease this please?

    See screenshot:

    Tatyana Hutsol Support Team

    Hello,

     

    Please add this css code:

    @media (max-width: 767px){
    .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_author,
    .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_author p,
    .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_date p,
    .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_date {
    margin-bottom: 0 !important;
    }}

     

    Thank you.

    Regards.

    Robert Helle

    Thanks Tatyana. It works but now the padding is too small hehe. SHould apply to all screens not only mobile. Sorry I think I was not clear about that. THanks.

    Tatyana Hutsol Support Team

    Ok, then please edit the code to this:

    .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_author p, .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_date p {
    margin-bottom: 0 !important;
    }

     

    Regards.

    Robert Helle

    Works fine now. Thanks a lot.

    Alexander Hutsol Support Team

    Hello,

    You are welcome.

    Feel free to create a new topic if you have any other questions.

     

    Regards.

Viewing 14 posts - 1 through 14 (of 14 total)
You must be logged in to reply to this topic.
Login