Front Page Projects Section

Illdy
1

Hello!
I have a problem of displaying images in the projects section properly.
They display fine on mobile however desktop is another story.
In your template the image link is like this:

a href=“http://google.com” title="[Illdy] - Project" class=“project” data-fancybox=“gallery” style=“background-image: url(“https://colorlib.com/illdy/wp-content/uploads/sites/11/2016/03/front-page-project-4.jpg”); height: 319px;”

In my case the code appears like below:

a href=“KONAKLAMA – Villa Amikos Kır Bahçesi” title=“KONAKLAMA” class=“project” data-fancybox=“gallery” style=“background-image: url(http://www.amikos.net/wp-content/uploads/2019/12/Konaklama-1-476x476.jpg);”

height:319px; attribute doesn’t seem to be coming in my code.
So I went in customization and added as css:

#projects .project {
height: 319px;
}
But this time images don’t display properly on mobile.
The site address is : www.amikos.net

I could not figure out the correct way to handle this problem.
Could you please help me?
Thanks in advance!

2

Hi There,

I’d love to have a look at it and try to help.

Please use this plugin to create temporary access for us, its automatic login link and does not requires sharing your admin details. here is How To guide. at the and don’t forget about  “Set as private reply” at the bottom of the message box

Hope to hear from you soon.

3

Thank you for your quick response. :slight_smile:
Could you provide me an email for me to create a user for you?

4

Hi there

Please add this custom css and then check agian:

#projects .project {
height: 380px !important;
}

5

When I put additional css doesn’t matter if it is 319px or 380px it messes up mobile display.

6

I changed the images to fit the current dimension regulations. It’s not a perfect solution but it’s a solution none the less…

7

Hi Amikos

You can wrap your code in media query if you want to apply only for particular screen size: CSS @media Rule

@media only screen and (max-width: 768px) {
#projects .project {
height: 380px !important;
}
}