Okay, well, as it turns out, the more important issue is that I’m trying to have the flip boxes show head shots of 3 people, and the entire image needs to be on the front of the flip box.

So to accomplish that, I searched the Enfold Forum and found this CSS:

.avia-icon-grid-container,.avia-icongrid-wrapper,.article-icon-entry {
height:50vh;
}
.responsive #av_section_1 > .container {
max-width: 1810px;
}

And it looks great on a large desktop computer screen, but not great on other screen sizes. They get vertical and cut off part of their face and name.

So I’m wondering if there is a way to customize these boxes to be exactly the size of the images or image proportion, take the full image? I hope that makes sense. And thank you. I have a coming soon page up, so I’ll provide login credentials in Private Content.

thank you as always for your help!

Thank you so much, I will take note of this for the future. Have a wonderful day!

~e

Thank you so much, it’s all fixed! I promise to look for that in the future and apologize, feel like I should have known that.

You are awesome,
~e

That was it, thank you so much! I will take this knowledge with me – don’t know why that didn’t come to me, but now I know.

Appreciate you so much,
~e

Thank you Ismael, this fixed it! You are awesome, have a great day!!

~e

You’re the best! It’s perfect now, and I will know how to do it next time – thank you, thank you!

Hi Ismael,

1) It did work to place the team member name below the picture on the page itself, which is awesome, but it changes the pop up to vertical with the name underneath as well, so it doesn’t have that nice horizontal layout with text wrapping around the photo, which allowed the pop up to be fully visible.

2) And the team member picture still isn’t taking up the full width of the column like the photos in the next row which do not have this css class. (I tried increasing the size of the max width, but that didn’t help.

So now the popup looks like this: https://nimb.ws/83T5Hw
And it really looked better like this: https://nimb.ws/ueMwY7

So the upshot is that the css effects both what is on the page, and the popup, so it appears the css needs to be separated.

I so appreciate your help. If you feel this isn’t possible, I could just go back to the vertical pop up, or use a pop up plugin. Just let me know what you think after taking another look.

Thanks again!

~e

You can close it, all set!

Thanks Rikard,

It kind of helped. It changed the Mobile version as well as tablet (only tablet was messed up and mobile version was better). Now on mobile there is a black line above and below the middle line of the hamburger icon, which is styled in theme options to be blue. And on the tablet version there are three black lines in the hamburger icon, then upon hover the middle line disappears, becomes white.

I liked the way the hamburger icon appeared on mobile prior to this change, it was the blue I styled it in theme options; would love for tablets to take on the styling in theme options as well.

I’ve tried that, cleared the cache on my phone, using Chrome, no cigar. Tried pulling up on somone else’s phone who had never accessed the site, that didn’t work either. Both show white top bar with white text.

I also tried pulling up the site on my phone in incognito mode – same thing – white top bar with white text.

But, if I go to a screen viewer for testing sites on different screen sizes, it looks good. I’m stumped and really appreciate your help.

• This reply was modified 2 years, 1 month ago by Eleina_Shinn.

Of course I don’t mind, I really appreciate your help.

Hi Mike,

No, that wasn’t what I wanted. I actually wanted the background to be white in the logo area and the top bar to be the blue – it looked really nice. Weirdly, although I can see that the logo area is now blue, I cannot see the change you made in the back end in Theme optins > Logo Area – it shows nothing, so I put it back to white, but that changed the top bar as well, and the styling is still not taking on any of the text colors I have programmed.

Supposed to be:

Blue Top Bar #066892
White Logo Area with Black text and blue on hover as well as active page – and, this is the way it is programmed, but it is not working.

Seriously, it was working just fine, exactly the way I have it programmed in theme options, then overnight, it just changed. There seems to be a conflict somewhere and it is not taking on my styling options.

That worked, and I was able to style it too, thank you!

Could I ask though, why is it that, although I have the Top Bar programed in Advanced Styling to have a background of Blue with white text, on a page that has a transparent header, it does not take on the blue background on tablet or mobile, it makes the background white, with white text, so you can’t see it. IF you go to a page without the transparent header though, then the top bar background will be blue. So basically, when you have a transparent header, that you bring down to tablet or mobile, the top bar does not take on the top bar settings under advanced, it just leaves it white. Am I missing something on that ?

Home Page with transparent header: http://vac.eswebsitedesign.com/welcome/

Other Page without transparent header, this is the way the top bar should look on mobile and tablet: http://vac.eswebsitedesign.com/contact/

Shoot, it didn’t work.

I think this worked great, I so appreciate your help. Thank you Thank you both!