Blog visualization on the mobile phone

Good morning and Happy Christmas.
I like a lot how the Blog page appears on my computer, but I have seen that on my mobile phone I see before the last posts and only on the bottom I see what I put in the right side bar.
I’d like that on my mobile phone appears first of all my right bar’s content and only on the bottom the last posts, because I have already the Carousel on the Blog page and because it would be more beautiful. Is it possibile to set for mobile phones that on the Blog page I see first the right bar’s content and than the last posts?
Thank you so much for helping me.
Best regards
Patrizia

Hi There,

It could be done with the custom CSS, please add this custom CSS under Theme Options > CSS:

@media (max-width: 767px){
    .blog .x-container>.offset {
        display: flex;
        flex-direction: column-reverse;
    }
}

Please add this code under functions.php file locates in your child theme:

function exclude_single_posts_home($query) {
  if ($query->is_home() && $query->is_main_query()) {
    $query->set('post__not_in', array(7,11,33));
  }
}
add_action('pre_get_posts', 'exclude_single_posts_home');

Please note that the 7, 11, 33 numbers are the post carousel IDs. To find your post ID, please take a look at this article:

Hope that helps and thank you for understanding.

Thank you so much.
I have done only the first step you wrote to me in Theme Option >Css and now it works well on my mobile phone. I didn’t understand the second part (functions.php) because I have seen that the first step was enought.
Why I have to do the second part (function.php)? If you tell me that it is necessary, I’ll do it, but right now only with the first step I can see on my mobile phone first the right sidebar’s contents and then the last posts. Thank you, your assistance is really good.
Best regards
Patrizia

Hello Patrizia,

Please login through FTP then go to wp-content/themes/x-child then you should be able to find the functions.php file there. You can then edit the file and place the code previously suggested there.

In case you are not seeing the x-child directory in there, you will have to install and activate the child theme first. You can get the child theme here.

Hope this helps.

Thank you Jade also to you, but I don’t understand why I have to modify that function if just with the Css code customized I have solved my problem on my mobile phone.
For me it’s already ok.
Thank you so much
Patrizia

You’re most welcome, Patrizia.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.