-
Posts
-
I tried inserting my own image in the header section background. The default image is Medium – 300 x 200. Which is the same size as the image I purchased from Shutterstock. Once I inserted my new image. It was blurry. So I decided to put the default image back in it’s place, and then that image came up blurry as well. Is there something I’m doing wrong? Or an easy fix?
Hey raymondshamoon,
Try running the thumbnail regeneration plugin to see if that fixes the issue:
https://wordpress.org/plugins/regenerate-thumbnails/
Best regards,
Jordan ShannonHey Jordan, thanks for the quick reply. I installed and ran the plugin. Some images were resized. However it did not fix the issue. What’s weird is the original default image was not edited or altered in any way. I simply switched it out for another image with the same dimensions. When it came out blurry. I decided to just replace the image back with the default image, and that also became blurry. So I’m not sure what’s going on?
Hi,
When you select the image from the Media Library, then you will get an option on the right hand side to select the resolution of the image, could you make sure that it’s large enough to look sharp there please?
Best regards,
RikardHey Rikard, thanks for replying. Before I made a change I took a screen shot of the image that was defaulted, with it’s defaulted settings. So when I switched to my image (that had the same dimensions) it went blurry. So I switched it back to the default image, making sure the settings on the right were the same, and they are. However the default image is blurry too now. Not sure what’s going on.
Ray
Hi,
Can you attempt to use an image with larger dimensions, say 1200 x 600? This is just to see if this one will appear clear.
Best regards,
Jordan ShannonYes, I was able to figure it out. Turns out the photos that show on the default page are not showing the default size. You have to click through each size to find out which one is the best size for that specific area. However the next issue I’m having is that the image in the header and the image half way down on the page are stretched out on the mobile.The slider images look perfect. How do I fix that?
Hi,
That image may be too large to scale attractively on mobile. What you could do is create a separate slider that shows only on mobile with the images scaled and sized to fit better on a mobile device.
Best regards,
Jordan ShannonHi,
Just add the following custom CSS code:
@media only screen and (max-width: 500px) { #av_section_1 { display: none !important; } }Best regards,
John TorvikHi John, I’ve copied and pasted that code inside of the Enfold options under “General Styling” is that where it goes? Is that fixing the issue with the mobile images? They still look stretched? What am I doing wrong?
Hi,
What you want to do is create two headers. One which is focused on mobile and one which is for desktop. So what you would want to do for desktop is this:
@media only screen and (max-width: 767px) { #av_section_1 { display: none !important; } }The mobile section you create should have its own id so for for mobile do this:
@media only screen and (min-width: 767px) { #av_section_2 { display: none !important; } }Best regards,
Jordan Shannon
- You must be logged in to reply to this topic.