[Support request] Mobile View like Newsmag

[Darshil]

Hello and Happy Holidays!

I love the interface of newsmag theme(especially on the mobile). I am sharing the reference website link, please help me with tweaking my website such it looks like the reference website – where the featured image and the text comes in the same row in mobile.

[Leo]

Hi there,

Try this CSS:

@media (max-width: 768px) {
    .post-image-aligned-left .inside-article {
        display: flex;
        align-items: center;
    }
}

[Darshil]

Hi Leo,

The code did stack up the featured image and the title in the same row in mobile. But the problem is that the images are not equally shaped. The first image is semicropped and the second image is still acceptable.

Image of the issue –

Also the text is completely sticked to the image which not looking good. Please help me in adding some gap between the text and image, as well as equally scaling the image.

I want the size of the image (square) and the spacing between the text and the image just like the reference website.

Thank you!

[Leo]

Can you disable your caching plugin so I can inspect the code better?
https://www.screencast.com/t/JLQc1YL8

The image issue is tricky to deal with – the site you’ve linked is using the same size for all of its images which is why it works better.

Are you able to do that? If not, then the images will be cropped if you want them to be the same width.

[Darshil]

Hi Leo,

Happy New Year.

I am really sorry for not disabling the cache plugin, you may inspect the code now.

Also, I just copy royalty free images from Unsplash, and upload it on Wp. Is there a way to resize my images such that all my uploaded images are of the same size (preferably like the reference website)? if not, can you please help me with the dimensions that I should set of my new images so that they are like the reference website and are not cropped. Thanks.

Another concern is that my latest featured image on homepage is completely sticked with the primary menubar, how can I slide it down so that there is a gap.

[Ying]

Hello Darshil ,

To have square image ( it will automatically crop your current rectangular photos to squares) , you could follow the steps below:

1. Set mobile site container content padding (left & right) to 8px
https://tinyurl.com/ybeuugr4

2. Add this css to make the image square and text font size smaller in mobile view only:

@media (max-width: 768px) {
    body .site .site-content .site-main .inside-article div.post-image {
        margin-bottom: 0;
        flex: 0 0 120px;
    }
    .resize-featured-image .post-image img {
        height:120px;
    }
    .blog .entry-header div {
        font-size: 12px;
    }

    .blog .entry-header h2 {
        font-size: 15px;
    }

   .blog .entry-header {
    margin-left: 20px; 
    margin-right: 10px;
    }
}

3. If you’d like to have different size of squared images, then go to Customizing > Layout > Blog > Featured Images > Under archive tab:

a) Change the height, for example 250px.
b) Change the above CSS flex: 0 0 200px; to flex: 0 0 250px; just to make sure these 2 numbers are matching.

To have some space between first post image and header, go to Customizing > Layout > Container > Content Padding, add some padding to Top.

You can set different paddings for mobile and desktop:
https://tinyurl.com/yde7gpk5

Let me know if it works!

[Darshil]

Hi Ying,

The padding of the top is fixed.

I just need your help with images in mobile. I hit the sweet spot for mobile when I set the customize ->layout->blog->featured image height as 120.

https://ibb.co/bHBHcGk

Here is the view of the mobile as well. The images are shaped really well. But the problem is that the text is sticked to the images. Only one post has the best text alignment and I’d like that kind of spacing and alignment for all posts.

Here’s image for reference – https://postimg.cc/Z9G9xpx7

I put the flex css code as 120 as well, as you mentioned it should be same as the featured image height in custom layout blog section.

But the problem is that it ruined the desktop view of the featured image. Reference image – https://postimg.cc/0zp21FYf

Please suggest a way to fix the text alignment in mobile view, and to fix the sizing of the desktop view without affecting the mobile view of images, cause it looks great with the 120 size.

Thanks!!!……

[Ying]

Hi Darshil,

Add another line of css will fix the issue, edited CSS here to replace the one before:
https://generatepress.com/forums/topic/mobile-view-like-newsmag/#post-1601960

Set the height in customizer back to fit the desktop view.

Let me know 🙂

[Darshil]

Thank you Ying!

That’s a relief. Everything looks great, please just help me with fixing the alignment of the text in the mobile view, for most of the posts it is sticked to the featured image.

I want to have a descent spacing for all posts. In my previous reply, I have shared a screenshot with the ideal spacing which i want for all the posts. Please just help me with that. Thank you very much 🙂

[Ying]

Hi Darshil,

Glad to help 🙂

Edited CSS here:
https://generatepress.com/forums/topic/mobile-view-like-newsmag/#post-1601960

[Darshil]

FINALLY! Perfectly aligned. Thank you very much Ying. You have no idea how happy I am (was considering to purchase newsmag just because of this kind of mobile alignment)

Just one small request, although there is a spacing between the image and text now, but the articles about “waking early”, “better sleep” and “meditation” have more spacing between text and images (which is perfect), while the last 3 articles on “study better”, “money”, “friends are slightly closer to the image. Can you please do something about the css code such that the last 3 articles which are closer to the image get farther just like the top articles on waking, sleeping and meditation?

2) Is there a way to hide the hamburger menu option in the desktop view?

3) Also, I have imported a GP template for my another domain. The blog page is set to live posts and it has the text as heading – “Helpful articles and insight into our agency.” I want to edit that but can’t figure out how.

Plus when I open any blog post, I see that the text container is in the center and there is enough spacing from left side and right side, it looks very neat (how is the blog text container set like that?)

Once again, thank you for your assistance and I wish you a great day.

[Elvin]

Hi,

2) Is there a way to hide the hamburger menu option in the desktop view?

Try this CSS:

@media(min-width:769px){
span.menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon {
    display: none;
}
}

3) Also, I have imported a GP template for my another domain. The blog page is set to live posts and it has the text as heading – “Helpful articles and insight into our agency.” I want to edit that but can’t figure out how.

I’m not sure I understand what you mean. Can you explain a bit more on what you’re trying to achieve?

Plus when I open any blog post, I see that the text container is in the center and there is enough spacing from left side and right side, it looks very neat (how is the blog text container set like that?)

By default, the theme automatically adds margin-left-auto; and margin-right-auto; to go along with the set max-width that’s set to the content wrapper. This centers the content.

[Author]

Posts