StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Portfolio Page Template (Mobile Responsive)

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Portfolio Page Template (Mobile Responsive)

This topic is: resolved

Tagged: , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • August 8, 2018 at 6:06 am #222317
    vash
    Participant

    Hey!

    I'm using the Academy Pro theme. I added the 'Portfolio Page Template' from Modern Portfolio Pro theme to my theme files and was able to get a portfolio 'grid' here: https://fervent.eu/courses

    It works beautifully on desktop, but displays really awfully on mobile - it's not responsive whatsoever.

    I'd really appreciate any tips / pointers on how I can make it mobile responsive.

    Many thanks!

    https://fervent.eu/courses/
    August 8, 2018 at 7:55 am #222318
    AnitaC
    Keymaster

    Did you copy the Portfolio styles from Modern Portfolio Pro over into your website?

    Need help with customization or troubleshooting? Reach out to me.

    August 8, 2018 at 8:02 am #222320
    vash
    Participant

    Not quite. I got the template code via Brad Dalton's site:

    Portfolio Page Template For Genesis

    August 8, 2018 at 8:07 am #222321
    AnitaC
    Keymaster

    He provides the CSS on the blog post.

    Need help with customization or troubleshooting? Reach out to me.

    August 8, 2018 at 8:14 am #222322
    vash
    Participant

    I added that css code to my theme's style.css file, but the portfolio page still isn't responsive 🙁

    August 8, 2018 at 8:16 am #222323
    AnitaC
    Keymaster

    It's responsive. Are you saying you do not want it to display three across on mobile?

    Need help with customization or troubleshooting? Reach out to me.

    August 8, 2018 at 8:19 am #222324
    vash
    Participant

    Precisely! 🙂

    I want it to only show 1 product per row, just like on the shop.

    August 8, 2018 at 8:21 am #222325
    vash
    Participant

    So, 3 products per row on desktop, but 1 per row on mobile

    August 8, 2018 at 8:22 am #222326
    AnitaC
    Keymaster

    Add this to the media query where you'd like that to start appearing.

    .mpp-home .content .featuredpost .entry {
    width: 100%;
}

    Need help with customization or troubleshooting? Reach out to me.

    August 8, 2018 at 8:24 am #222327
    vash
    Participant

    Do you mean add this as custom CSS?

    @media only screen and (max-width: 600px) {
.mpp-home .content .featuredpost .entry {
    width: 100%;
}
}
    August 8, 2018 at 8:27 am #222328
    AnitaC
    Keymaster

    Yes, if that's where you want it to start - on a device 600px wide.

    Need help with customization or troubleshooting? Reach out to me.

    August 8, 2018 at 8:29 am #222329
    vash
    Participant

    Anita, you STAR! 🙂

    Thanks ever so much!! It looks beautiful now! 😀

    Thank you!!

    August 8, 2018 at 8:53 am #222331
    AnitaC
    Keymaster

    You're welcome. Mark this resolved please 🙂

    Need help with customization or troubleshooting? Reach out to me.

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Portfolio Page Template (Mobile Responsive)’ is closed to new replies.