[joannajywong]

Hi, I have four questions. I did search the forums and utilize some of the CSS codes that were provided to other people’s posts, but it didn’t work on my end.

1) How do I change the color AND/OR remove the overlay on the home page? I used the below script in my Custom CSS but the overlay hasn’t gone away.

.has-bg-img:before { background: none; }

2) How do I get my email address to stay aligned, on the contact page? I used the below script in my Custom CSS but it’s still getting bumped to the next line.

@media screen and (min-width: 1200px) { .fun-fact h4 { max-width: 220px; } }

3) How do I change the icon size on the contact page?

4) How do I change the color of the overlay when I hover over portfolio item images? And/or the icon that shows up when hovering, as well.

Thanks for your help!

[joannajywong]

Also, if helpful, my url is joannajwong.com.

[joannajywong]

Also, last question, how do I change the color of the left/right arrows and close buttons when I am viewing individual portfolio items?

[Anonymous]

1. Try this: .has-bg-img .content:before { background: none; }
3. try this: .fun-fact h4 { font-size: ?px }
4. try this: .media-box .mask { background: rgba (x, x, x, x)}

[Anonymous]

Arrow / Close Button Color : .portfolio-nav a { color: x; } (Not Hover and change both color)

For Individual Color:
Arrow: .a.next.ajax{ color: x; }
Close: .portfolio-nav a.back{ color: x; }

Arrow Hover color : .a.next.ajax:hover { background-color: x; }
Close Hover Color: .portfolio-nav a.back:hover { background-color: #F00}

[Anonymous]

Hope that usefull for you and work.. :D

[joannajywong]

Thank you! Some follow up comments/questions:

1. Worked perfectly, thank you!

2 &/or 3. That just ended up changing the size of the font, and not the icon. I suppose that I could live with the icon size as long as there was a way to make the email address fit correctly. I realized the email address will also fit if I split that row into two rows with two columns each, but then I can’t get the content to center correctly in the column. Any solution to either of these three items would be great:

2/3a. Icon size
2/3b. Email address alignment
2/3c. Centering content in each column when formatted as two rows of two columns

4. When I hover over the portfolio item, the specified color shows, but it’s at full opacity. I’m trying to figure out how to hover with just the color overlay on top of the portfolio item image, such as the live preview shows. When I edit the opacity with the CSS code you provided, it just changes the opacity of the solid color block with none of the original image shown. Any suggestions?

5. Thanks for the help with the arrows! For anyone else looking at this thread for reference, this is what I used to change the hover color of the left arrow:

.portfolio-nav a.prev:hover { background-color: #x;}

Again, I really appreciate your help!

[serkan]

Hi joannajywong,
You can try to use this custom css code for email alignment.

@media screen and (min-width: 1200px) { .fun-fact h4 { margin-left: 93px; font-size: 11px; } }

This custom css code for portfolio mask background color.

.media-box .mask { background: rgba(79, 39, 57, 0.6); }

Please don’t ask unrelated issues on the same topic. It is hard to search for the other members. And thanks to @GaroPpo for the answers.

Thanks

[joannajywong]

These did the trick, thank you so much!

[serkan]

You’re welcome, please don’t forget to rate the theme on themeforest if you liked it, thanks.