Making custom portfolios responsive
-
Hello!
I am working on this WordPress.com site: http://www.theslowmelt.com. The homepage portfolio is great, but the portfolios for the two Makers Series pages aren’t responsive: https://theslowmelt.com/portfolio/makers-series/; https://theslowmelt.com/makers-series/
I have had to add a lot of code to the CSS to change the font size and featured image sizes and make these pages full-width, and I believe these things are interfering with the responsiveness, but I still want these portfolios to look exactly the same as the homepage portfolio. And I want them to respond the same way the homepage portfolio does. They look okay in mobile view (though some images seem to be stretched a tiny bit), but it’s really the tablet view that needs help–and when I resize my browser on my laptop and desktop.
I’ve chatted with a WordPress rep about this and worked on the pages with my friend, who is a developer. The WordPress rep said this: “It looks like you’re using the portfolio shortcode on those pages and the same CSS isn’t being applied.” He suggested I reach out to the WordPress community. My developer friend found out that these parts of the custom CSS (BELOW; LINE 112 AND LINES 125-129) are what are preventing the page from being responsive; however, taking away these lines make the images different sizes AND make it so the portfolio isn’t full-width anymore.
.postid-382 .column-3 .portfolio-entry {
margin-bottom: 20px;
width: 349px; JUST THIS LINE – LINE 112
margin-right: 22px;
}ALL OF THIS BELOW – LINES 125-129
.postid-382 .portfolio-featured-image img {
height: 262px;
width: 360px;
}Could anyone help me make these two portfolios responsive? Thank you so much, in advance, for your help!
The blog I need help with is: (visible only to logged in users)
-
Hi, when I remove the CSS that has been added to make the images all the same size, your site is responsive. What I would suggest is to prepare the images so that they are all the same size, or at the very least the same width to height ratio, and that will eliminate the problem.
With responsive designs, you will typically not want to use a fixed dimension for widths and heights as that can cause issues with the responsiveness of the elements of the page, which is why your images are distorting on smaller screens, and why at some window widths, the grid layout goes wonky.
-
I should add that what is important as far as image size goes is that they are all the same width to height ratio. I’m seeing that all of the images (I checked) are 1091px wide, but the heights vary. If your image editing program has the ability to crop by ratio, I would suggest the following ratio: 1.4 to 1 (width to height).
-
Thank you so much. I tried doing that, but there was extra white space on the right of the grid. Do you know why that might be happening and what I can do to fix it if I do make all of the images the same width to height ratio?
-
The following custom CSS is what is causing the issues. The rules have static widths and height set and that causes this sort of issue on responsive designed themes.
If you remove the following and make all the images the same width to height ratio, then the grid will work.
.page-id-269 .portfolio-featured-image img { height:262px; width:370px } .page-id-269 .column-3 .portfolio-entry { margin-bottom:20px; width:349px; margin-right:22px } .postid-382 .column-3 .portfolio-entry { margin-bottom:20px; width:349px; margin-right:22px } .postid-382 .portfolio-featured-image img { height:262px; width:360px } -
Thank you! So sorry for the delayed response. I will try that and let you know. Many thanks again.
-
- The topic ‘Making custom portfolios responsive’ is closed to new replies.
WordPress.com Forums 