Jump to content


This topic is now archived and is closed to further replies.


Hover image sizing?

Recommended Posts


Hi, I would like to use Hover the display portfolio items with 2 images per row, but I would like them to be large images such as what was done on the site http://heyflux.com/(see  http://take.ms/UadCi for screen shot).  If I make each image 6/12 for the column I get two images across, which is what I want, but the images aren't as large as I want vertically.  How can I change that so they are square and not rectangular?  The example on my site is at: http://bluerocketdigital.com/



Share this post

Link to post
Share on other sites

Hey There,


Yep, you can adjust the height.  To do so, in the section, you should have the option to add custom styles.  Add the following code to that input field and you *should be able to override the default height setting.  I did some testing on your site and found that 500px was the size needed for the images used so we'll go with that but you can adjust as necessary:

height: 500px;

If  this doesn't work for some reason, you can override the section's default style but be warned this will do it for all instances of the section.  Add this to your custom css or the style.css file in your theme directory.

.jgHover figure { height: 500px; }

Share this post

Link to post
Share on other sites

Thanks for the quick reply.  It didn't seem to work by adding it to the custom style (see http://take.ms/5ZG24) but it did in the custom css file itself which will work for my needs but I thought I'd mention it in case that wasn't expected to be needed.


While I've got you can I ask a question because I'm rather new to Pagelines and I'm pretty sure you're on the team?  Does Pagelines have any "rules" or QA type of process around 3rd party extensions and/or themes?  I ask because I've noticed that some of the demos they link to 404 and on others the devs seem to be MIA and just like a Wordpress plugin I don't really want to be using stuff that may have security issues or whatnot due to lack of being maintained.  Maybe it doesn't apply to this stuff but I wanted to ask.  For example, when Genesis sells a child theme in their store through a 3rd party they pretty much "vouch" for it in a manner of speaking.  I just want to know how selective I need to be with 3rd party Paglines stuff sold through the store.  


Thanks again.  I love Paglines BTW. Rich

Share this post

Link to post
Share on other sites

Sorry, just noticed that after the height was increased it isn't expanding the section, just going OVER everything.  See http://take.ms/vfd8t

Site is http://bluerocketdigital.com/


EDIT - it works now that I removed the height: 500px; from within the section itself.  

Share this post

Link to post
Share on other sites

  • Similar Content

    • ivaemer
      By ivaemer+
      I have to change billing details (when exporting mz invoice in .pdf)
      Name and surname company address I tried to change it but I did't find the way to do it.
    • optimizewise
      By optimizewise+
      I am using Hover on the page below and have it set for each image to be 6/12 columns, but instead of the images coming right next to each other, there is space in-between them:
      I want them to be like the are on http://heyflux.com/
      What am I doing wrong?
    • vogelwild
      By vogelwild
      Hi there, 
      I've just added a hover-section to my sidebar with an image-width of 12 columns (so that it shows only one hover-image per row) and recognized that firefox outputs it "wrong" [attachment=2402:Screenshot1-BEFORE.png]
      The simple solution for me was it to add a max-width of 100% to some classes via CSS. If someone has the same issue, that works:
      .jgHover *, .jgHover *:after, .jgHover *:before 
      box-sizing: border-box;
      max-width: 100%;

      Have a great day,
      PS: There was no Topic-Prefix for the Hover-Section.
    • carlton
      By carlton
      When I try to open the media library while using DMS 2.0.4, I'm given a window that's not large enough to select images for editing or otherwise.
      Can this be fixed??
      I want to keep my Details theme, but it's not DMS 2 compatible.
    • vinofanten
      By vinofanten
      My Wordpress Admin and DMS page have been extremely slow lately, and loading these pages takes forever. Therefore, I just performed a speed optimizing test with the P3 Plugin Profiler, where I got some interesting results (see attached images).
      The following results explains the slowness lately:
      Total Load Time: over 50s
      Site Load Time: 8s
      Profile Overhead 41s (not sure what this is, but 41s can't be good)
      Theme Load Time: 6,4s
      Queries: 92
      I know that optimizing images and css/javascript code, as well as using a cache plugin, will optimize site loading times, but I am wondering why the total load time and the theme load time are so high. Can anyone explain how I can improve this? FYI I'm using the Academy Theme by James Giroux, I have about 20 plugins (none of them should be the problem according to the performed speed test), and I've only posted a few posts. For me, the problem is mainly back end, where editing in the admin area and in DMS takes forever. Viewing the website front end seems to be OK.
      My URL is: www.pastaevinoblog.com/wordpress
      Hope that someone will be able to explain how to fix this.