Changing the layout of the main page

  • Author
    Posts
  • #161541

    vleksander98
    Member
    Original poster

    Hello, the site I need help with is https://mush.pl (which was previously called Murasaki Shiroi). I am in the process of rebranding my site and I thought that it would be good to change it a little bit.

    I ve realised that while the current look of main page looks pretty good on desktop and tablets, it is kinda non optimal for mobile devices (which I have most views from).

    What I would like to know is that if there is an option to change the site layout in the way in which the two HOT NEWS posts would be featured on top (just like it is now) and all the bottom ones would display in the list (like here for ex.: https://i.ibb.co/B4w4PHt/deded.png). I think this site format would be much more phone friendly and I would be really gratefull If you tell me if it is possible to achieve it.

    Thanks in advance and have a great day!

    The blog I need help with is: mush.pl

    #161545

    tarasdashkevych
    Theme Author

    Hi Aleksander,

    I am afraid it’s not possible to change the layout as you have on your example due to the structure of the page.

    On the other hand, you can try this custom CSS to change the appearance of the archive page on mobile views:

    
    @media (max-width: 500px) {
        .archive-grid .hentry .thumb-link {
            height: 100px;
            width: 100px;
        }
      
        .archive-grid .hentry .entry-header  {
          width: calc(100% - 100px);
          margin-left: 30px;
        }
    
        .site-content .archive-grid .hentry {
          height: auto;
          flex-direction: row;
          flex-wrap: wrap;
        }
    
        .archive-grid .hentry .entry-cats {
            margin-top: 0;
            margin-top: 0.5em;
        }
    
        .archive-grid .hentry .entry-cats a {
            background-color: transparent;
            color: #8156d6;
            padding: 0;
        }
    
        .archive-grid .hentry .entry-title {
            margin-top: 0.25em;
        }
    }

    It does not make your grid to look exactly like a list in your example but changes its default design in mobile views. We might also introduce similar layout of a grid in mobile views in the future theme updates.

    Hope this helps. Let me know if you have any additional questions.

    Kind regards,
    Taras

    #161553

    vleksander98
    Member
    Original poster

    Hey, it is really perfect solution for now! The site looks way better on mobile :D Thank You a lot and have a beautiful day :)

    #161572

    tarasdashkevych
    Theme Author

    You are very welcome, Aleksander!

    Kind regards,
    Taras

The topic ‘Changing the layout of the main page’ is closed to new replies.