Argent theme: portfolio pages not responsive

  • Unknown's avatar
    saanajaakkola · Member ·

    Hi, I’m struggling with my new website and the Argent theme again.

    I just noticed that my portfolio pages and single blog posts don’t adapt on mobile view.

    To be clear, I haven’t enabled the specific mobile theme, because I didn’t like the way it looked. It doesn’t use custom CSS, for example, it doesn’t show portfolios, widgets, and so on. So I am now talking about the normal view on Argent theme, as it is shown on laptop screen.

    The problem is that e.g. my static front page and all ‘normal pages’ are adapting to mobile screen perfectly, but portfolio pages and single blog posts are not. Here is two screenshots to clarify the issue:

    The first one is from my front page, and shows how the text adapts nicely on phone view: http://prntscr.com/8m3anf

    The second one is taken on one of my portfolio pages and shows clearly how images and text don’t adapt on the screen: http://prntscr.com/8m3b3b

    Same issue seems to be with single blog posts.

    Is there anything I could do to help the pages adapt also mobile devices?

    Thanks in advance.

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    Looks like you’ve added some custom CSS that’s changing the width of certain pages, which overrides the theme’s responsive design in some contexts.

    Here’s an example of CSS you added that changes the width to a fixed 960px wide, which is too wide for smaller screens like phones:

    .single .hentry, .single-post .entry-content {
     width: 960px;
}

    If you remove that type of custom CSS, your display should be responsive again.

    Or you could learn about media queries to restrict that type of changes to certain screen sizes:

    https://en.support.wordpress.com/custom-design/custom-css-media-queries/

    If you need further help with custom CSS feel free to post in the CSS Customization forum:

    https://en.forums.wordpress.com/forum/css-customization

  • Unknown's avatar
    saanajaakkola · Member ·

    Oh that’s the reason, and I just added the CSS this morning. I was earlier asking on other topic how could I make single blog posts wider than the original 490px, and I was advised to use the above CSS.

    I took that out now and it seems to work, so thanks for that. Could you maybe advise is there any CSS for making single blog posts also 660px wide (no need to be wider than that) and all pages would still adapt to mobile view?

    Thanks so much again! :)

  • kathrynwp · Staff ·

    Any CSS that you want to restrict to a certain screen size, you’ll need to wrap in a media query.

    If you check out our support page you’ll see an example where the #site-header element is hidden only on screens up to 800px:

    @media screen and (max-width: 800px) {
    #site-header {
        display: none;
    }
}

    You can use min-width or max-width as you like, to restrict changes to different screen sizes.

    So for example, to restrict your earlier CSS to screens wider than 1024px, you could try something like:

    @media screen and (min-width: 1024px) {
    .single .hentry, .single-post .entry-content {
     width: 660px;
  }
}

    You can adjust any of the numbers as you like. You can test your changes by making the browser window smaller to see the media queries take effect.

    If you need further help with specifics, please post in the CSS forum, as I mentioned above:

    https://en.forums.wordpress.com/forum/css-customization

  • Unknown's avatar
    saanajaakkola · Member ·

    Thanks for your answer. Actually, the only thing I wanted to do was to increase the width of single blog posts, and I did pop a question about it on CSS forum and the answer I got then lead to this problem! :)

    I’m only now about to publish my first blog posts on http://www.sandria.fi, and I’d still like to have the single blog post content wider (660 px would be perfectly enough). I don’t kind of understand why it’s this narrow in the first place, as the content doesn’t even align with its’ title. But if it’s not possible without having to mess up with those media screen queries, I rather learn to cope with it! :) Thanks anyway for your help.

  • kathrynwp · Staff ·

    What about trying something like this, to restrict the wider single-post width to larger screens: 

    @media screen and (min-width: 1060px) {
  .single .hentry, .single-post .entry-content {
       width: 660px;
  }
}

    That’ll leave smaller screens unaffected.

  • The topic ‘Argent theme: portfolio pages not responsive’ is closed to new replies.