[Support request] Mobile View like Newsmag

Home Forums Support [Support request] Mobile View like Newsmag

Home Forums Support Mobile View like Newsmag

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1599685
    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.

    #1600255
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    @media (max-width: 768px) {
        .post-image-aligned-left .inside-article {
            display: flex;
            align-items: center;
        }
    }
    #1600449
    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 – Display after adding code in mobile.

    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!

    #1601103
    Leo
    Staff
    Customer Support

    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.

    #1601274
    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.

    #1601960
    Ying
    Staff
    Customer Support

    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!

    #1602781
    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!!!……

    #1603014
    Ying
    Staff
    Customer Support

    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 🙂

    #1603586
    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 🙂

    #1603965
    Ying
    Staff
    Customer Support
    #1604164
    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.

    #1604334
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

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