[hiran1]

Hi Serkan,

I am having problems with the home page and adding an image.

At the moment, the image at the top is being cut off when I see it on my laptop browser (both Chrome and Edge), which you can see here (www.hiranadhia.com), but when I look at it on Screenfly (http://quirktools.com/screenfly/#u=http%3A//hiranadhia.com&w=375&h=667&a=37) then it isn’t cut off but this isn’t what I am seeing on my browser?

Why is this happening? What is the optimum size for a image on the background without it being cut off at the top for a normal 15″ laptop (1366 x 768 resolution)? I know it is responsive but I am happy with how it looks on tablets and mobiles – I just don’t want it to be cut off for laptop?

The other thing is that because of this cutoff, the overlay of the text looks really messy. Is there any way to add an outline or shadow to the text so that it is easier to read? I removed the background filter, but is there any CSS code to tone it down to find an optimum level of opacity – maybe as a percentage?

Would really appreciate your help with this so I can make my homepage look the best that it possibly can? :)

Many thanks,
Hiran

[hiran1]

Also, is it possible to reduce the padding between images on portfolio pages? I want to reduce the white gaps between the images on this page and the others: https://www.hiranadhia.com/#/portfolio/portfolio/fanbytes/

Many thanks,
Hiran

[serkan]

Hi Hiran,
All devices dimensions are different so it is not possible to protect the size. WordPress is cropping the background images a little bit.
You can use this custom css code and play with 0.4 You can increase or decrease it. Just try this way.

.has-bg-img .content:before { background: rgba(73,92,95,0.4); }

You can use this custom css code for your portfolio issue.

@media screen and (min-width: 768px) { .portfolio-single .entry-content img { margin-bottom: 2em; }

Thanks

[hiran1]

Hi Serkan,

The first custom CSS doesn’t really work at all – I changed the 0.4 figure to 0.6, 16 and 100 and nothing changes with the background image at all?

Also, is it possible to add a small drop shadow on the interactive text on the homepage so that there it is easier to read on top of the image? Is there any custom CSS for that?

Thanks for the margin reduction code, is there any code I can use to toggle the size to make the margin bigger or smaller? Can I isolate and remove the padding on specific images as well – how would I go about doing this?

Many thanks,
Hiran

[serkan]

Hi Hiran,
You should remove this custom css code. That is why the first code is not working.

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

The smart way is using background shadow for make the test readable.
If you would like to isolate the padding on specific image, you should know about some coding because you should write the page id class to the code.
Thanks

[hiran1]

Hi Serkan,

That has fixed that thank you!

Last thing is the background image crop. You said before: “WordPress is cropping the background images a little bit.”

Is there a way to change it so that it doesn’t crop the image at the top for my laptop? That would solve all of my problems from now on!

Many thanks,
Hiran

[serkan]

Hi Hiran,
Actually, WordPress is not cropping the image. If you would like to see an optimal resolution of the image for the laptop screen, I would recommend you to calculate the laptop screen’s aspect ratio and set the background image in the same aspect ratio in photoshop or other edit programs. All devices dimensions are different so it is not possible to protect the size for specific devices. It is not suitable for responsive design methods.
Thanks