Thanks Rikard! You can close this thread.

Ok I will just turn the animation off then.

One more issue I noticed…the buttons at the bottom of each section are no longer working. They used to hover and be links to other pages and now they do not work at all. They are supposed to work like they do on the current homepage with a hover effect and a link to other pages. Can you please help me fix these and then everything will be working perfectly. These are the buttons that read “Find Out More”

This appears to be just happening on my desktop computer. It appears that the buttons are clickable and hoverable on my iPhone and iPad. It seems to be caused by the code below because if I remove the bottom 2 lines the buttons work fine. Is there any reason why I need these 2 lines as part of the code for this section or can I remove them? Everything seems to be working fine when I remove them but just wanted to check. Thanks in advance!

.imageHoverFade:hover p{
  color:#000!important;
  position:relative;
  z-index:999;
}

• This reply was modified 8 years, 10 months ago by djshortkut.

Thank you so much Vinay, you’re amazing! Three small things I want to change and I can’t seem to figure out how with the quick css you input:

1. As you can see on the link below on my current live homepage each of the initial color backgrounds for the grid rows are different colors. The first and third grid row backgrounds are set to color #f9f9f9 and the middle grid row background is set to #f2f2f2 You set the current background correctly to #f9f9f9 I assume I have to target the center section and add the code modified slightly but can’t figure out how to do so. How can I change the center grid row to make the background #f2f2f2? (See Image)

2. Right now there is an animation where these overlays animate from bottom to top when you scroll down on my desktop computer. How can I make it so this doesn’t happen and they are already over the section when you scroll down? Doesn’t seem to be an issue on mobile devices.

3. The overlay section isn’t covering the images completely on my iPad in portrait mode (See Image)

Thanks again!

• This reply was modified 8 years, 10 months ago by djshortkut.

Thanks Vinay! You can close this thread.

I imported the fonts in the import/export section of the theme under the Iconfont Manager in the Enfold settings (See Images) These were fonts I downloaded from fontello as .svg fonts The one that you uploaded is too large for that section and the wrong color so I put the old one back. Plus it still doesn’t look hi-res on my retina device. I think the only way to make it retina is to use this icon font. Thanks!

'font' =>'lineicons9', 'icon' => 'ue800'

• This reply was modified 8 years, 10 months ago by djshortkut.

Thank you Vinay, I tried inputting this code for retina devices in my quick css with this media query. The problem is that when I enlarge the size of the image for retina devices, it also enlarges the size of the icon within the box (which I don’t want) because it ends up being too large. (See images)

I think the pixelation problem has to do with me scaling down the image so small and that’s why it is showing up pixelated on retina devices. I already have this custom icon uploaded to my theme in the Iconfont Manager, can’t I just access this icon this way. That way, when the icon is scaled down, it will still stay retina and look great on my retina devices since they are .svg files. I already have this icon used on another page on my theme and it shows up retina quality. The color I need the icon is #808080 and size of 24×24 I feel like it would be easier to do it this way. The icon info is below. Can this be done? Thanks for all your help!

( 'font' =>'lineicons9', 'icon' => 'ue800');

Maybe I didn’t explain clearly enough. What I am talking about is replacing the current image with the one that I have uploaded in my media library. I am able to do so with this code but the problem is that it doesn’t fit within the box the way the mockup that I sent looks. Can you let me know how I can make this work please?

#top select, #top .avia_ajax_form .select, #top .entry-content-wrapper select, #top .mobileMenu { background-image: url(link-to-your-icons.png); }

Sorry, try again

Thanks Vinay! Yes, I have input your code into separate code blocks on the page. Everything works great except the text block color still isn’t working.

What I am trying to accomplish is that when you hover over the grid section, the background image appears on hover and the color of the text block changes to black. The code that Andy supplied for the text block hover works but you need to actually hover over the actual text which I don’t want, I want it to change simply when you hover over that section. Hopefully that makes sense.

In case you need to take a closer look, I provided temporary login credentials below.

Ok that will work, thanks! You can close this thread.

Hey Josue,

Since this thread isn’t closed yet, I noticed I am also having the same issue when I pull up this page on my iPhone in portrait mode and landscape mode where there is a 1px gap between some of the images. (See attached images) Can you please let me know how I can fix this. Thanks!

• This reply was modified 8 years, 10 months ago by djshortkut.

Thanks Elliott! I was able to target each grid cell with this code. I only need help on two more items to get things looking how I want them to:

1. How can I make the background repeat for each background image in the grid rows “stretch to fit” so the entire image is visible upon hover for each grid cell. Right now the image does not fit correctly in each cell and I want it to stretch to fit on any screen size.
2. How can I make the text block color for each section black on hover only because it’s difficult to read right now with the current text color over the background image.

I have attached an image that shows how I’m trying to get each section of the grid row to look if that helps.

Thanks!

• This reply was modified 8 years, 10 months ago by djshortkut.

Thank you Josue, that fixed it! You can close this thread.

Thank you Basilis but I’m going to need more help than that. I created a home test page to try this on before I put it live on my site to make sure I get it working correctly. I added a custom background image in the first grid row and added a custom css class to that grid row of custom-background-image

Can you provide me with some quick css so that the background image in this grid row only appears on upon hover please? Thank you!

I figured it out. You can close this thread.