Modern Portfolio images in portfolio section

Community Forums Forums Design Tips and Tricks Modern Portfolio images in portfolio section

This topic is: not resolved

This topic contains 10 replies, has 3 voices, and was last updated by  Tim Squires 1 year, 5 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #30953

    Tim Squires
    Participant
    Post count: 66

    Hi, I have a created a page in Modern Portfolio called “Featured Projects”.

    I would like the images and links on the home page in the portfolio section to all link back to this Featured Projects page.

    I have tried doing this using three separate text widgets with the appropriate code placed in each. This works functionally, but looks awful visually as the three text widgets display down the page underneath each other – not side by side across the page.

    I can get the homepage visual effect / layout that I need using posts and featured widget amplified, but I need the links to all point back to one single page, not three individual posts.

    You can see both examples on my home page (looks really bad but hopefully you’ll get the idea of what I am trying to achieve)

    Grateful for any ideas as always,

    Thanks! :)

    http://www.timsquires.com.au/portfolio

    #30971

    Robin
    Participant
    Post count: 318

    I don’t know if the featured widget amplified can do what you have in mind, but I think if you do something like this with your CSS:
    #portfolio .widget {
    width: 30%;
    float: left;
    padding: 0 18px;
    }

    then you can do it with the text widgets you have set up. You’ll want to mess with the width/padding/margin–I just threw in numbers that made it come up on one line like the featured one. (If you use the above code it’s going to affect the current featured widget amplified and shrink that, so change it to #portfolio .textwidget if you want it to just affect the text widgets)

    One issue I see with this approach is that when you update your portfolio you will have to also update the widgets by hand–but if you don’t mind that then rock on. HTH


    I do the best I can with what I’ve got. (say hey on twitter)

    #30975

    Tim Squires
    Participant
    Post count: 66

    Hi Robin, thanks so much – that’s great. I used the #portfolio .textwidget which looks great on my desktop. Only problem is that on the mobile version the new text widget images shrink way down in size. Any ideas on how to stop that from happening? :) Many thanks.

    #30979

    Robin
    Participant
    Post count: 318

    Hey Tim!

    If you go down to the responsive section(s), you can add in a rule like:
    #portfolio .textwidget {
    width: 100%;
    }

    (May need to tweak padding/margin/etc. again.) You will want to decide if you want it to go large on the first set (iPads/tablets) or wait to do that at the phone level but something along those lines should do it.


    I do the best I can with what I’ve got. (say hey on twitter)

    #30986

    Tim Squires
    Participant
    Post count: 66

    Hi Robin, thanks, but I can’t get that one to work. I added the rule under the media queries section – is that the right place? (Still getting the tiny images in mobile view)

    #30988

    Robin
    Participant
    Post count: 318

    If you add !important to it then it should do it. I was putting it down around line 1632, in the iPhone section.


    I do the best I can with what I’ve got. (say hey on twitter)

    #30989

    marybaum
    Participant
    Post count: 127

    Also, to save you searching as I did the other day, on Chrome Mac there’s a bug in the nav menu that makes the first item rise up above the baseline. The fix is to change out the margin-top for padding-top in the #header .genesis-nav-menu rule.

    This is NOT original with me. I found it by searching on the modern-portfolio tag in this very forum.

    Here’s where I found the fix: http://www.studiopress.com/forums/topic/modern-portfolio-menu-link-position/

    Hope it helps.

     

    MB


    Be it ever so run down, there’s no place like FriendFeed. ;-)

    #30991

    Tim Squires
    Participant
    Post count: 66

    Almost! :) Works on my desktop when I shrink my browser window, it also works on my iPhone – but on my iPad the first widget pushes way over to the right, and the next two widgets sit to the left beneath it leaving a big empty white space above them. Is that a padding issue maybe?

    #30992

    Tim Squires
    Participant
    Post count: 66

    Thanks Mary – I’ll take a look at that too :)

    #30998

    Robin
    Participant
    Post count: 318

    Tim, I saw that, too. If I had to guess, I think it’s due to the featured widget above–at a certain screen size, the middle title is two lines and the others are just one. If you shrink the window so that they are all two lines, the issue goes away. My guess is that if you remove the featured widget, you wouldn’t have the issue.


    I do the best I can with what I’ve got. (say hey on twitter)

    #31002

    Tim Squires
    Participant
    Post count: 66

    Great Robin, thanks – that seems to have worked. I’ve really appreciated your help with this, thanks so much :)

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.