I would like to make the test page same as homepage in terms of layout

I would like to make the test page same as homepage in terms of layout, metadata, etc on mobile. Can you help?

  • viobru
    • Recruit

    Hi SIMPSON!

    Hope you are doing great :slight_smile:

    Try using this as additional CSS under Appearance > Customize > Additional CSS:

    /* Change style on TEST PAGE for mobile screen sizes - added by Violeta WPMU DEV */
    @media only screen and (max-width: 830px) {
    .page-id-224462 .item-inner.clearfix {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    .page-id-224462 .item-inner.clearfix .title {
      -webkit-box-ordinal-group: 1;
      -moz-box-ordinal-group: 1;
      -ms-flex-order: 1;
      -webkit-order: 1;
      order: 1;
    }
    .page-id-224462 .item-inner.clearfix .featured.clearfix {
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2;
      -ms-flex-order: 2;
      -webkit-order: 2;
      order: 2;
    }
    .page-id-224462 .item-inner.clearfix .post-meta {
      -webkit-box-ordinal-group: 3;
      -moz-box-ordinal-group: 3;
      -ms-flex-order: 3;
      -webkit-order: 3;
      order: 3;
      margin: 0 !important;
      padding-top: 10px;
    }
    .page-id-224462 .item-inner.clearfix .post-summary {
      -webkit-box-ordinal-group: 4;
      -moz-box-ordinal-group: 4;
      -ms-flex-order: 4;
      -webkit-order: 4;
      order: 4;
    }
    .page-id-224462 .item-inner.clearfix {
       margin-top: 0 !important;
    }
    .page-id-224462 .listing-item-blog-3.has-post-thumbnail .post-summary {
       padding-left: 0px !important;
    }
    }

    Please, make sure you have a COMPLETE and UPDATED BACKUP of your site before adding the CSS.

    Hope this helps. Have a nice day ahead!

    Kind regards,
    Violeta

  • Kasia Swiderska
    • Support nomad

    Hello SIMPSON ,

    I have checked both the home page and the test site on both desktop mobile and real mobile and I can only see there is the only difference with the date position.
    However, the issue is that HTML would need to be changed in order to get the same view.
    I have compared settings of the home page and test page and it looks like there is Visual Builder used and both pages are using a different template for the blog elements.
    The home page has 25 and the test page 15 - so you would need to change those elements on the test page so the settings are the same as on the home page.

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.