Modern Portfolio images in portfolio section

[Tim Squires]

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

---

timsquires.com.au

[Robin]

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)

[Tim Squires]

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.

---

timsquires.com.au

[Robin]

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)

[Tim Squires]

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)

---

timsquires.com.au

[Robin]

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)

[marybaum]

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.community/topic/modern-portfolio-menu-link-position/

Hope it helps.

 

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[Tim Squires]

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?

---

timsquires.com.au

[Tim Squires]

Thanks Mary - I'll take a look at that too 🙂

---

timsquires.com.au

[Robin]

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)

[Tim Squires]

Great Robin, thanks - that seems to have worked. I've really appreciated your help with this, thanks so much 🙂

---

timsquires.com.au

[Author]

Posts