Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 26, 2017 at 4:03 am #799952
    raymondshamoon

    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?

    May 26, 2017 at 4:15 am #799960
    Jordan Shannon

    Hey raymondshamoon,

    Try running the thumbnail regeneration plugin to see if that fixes the issue:

    https://wordpress.org/plugins/regenerate-thumbnails/

    Best regards,
    Jordan Shannon

    May 26, 2017 at 4:34 am #799962
    raymondshamoon

    Hey 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?

    May 26, 2017 at 6:58 am #800003
    Rikard

    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,
    Rikard

    May 26, 2017 at 8:15 am #800016
    raymondshamoon

    Hey 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

    May 26, 2017 at 5:03 pm #800260
    Jordan Shannon

    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 Shannon

    May 31, 2017 at 7:09 am #801847
    raymondshamoon

    Yes, 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?

    May 31, 2017 at 3:58 pm #802069
    Jordan Shannon

    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 Shannon

    June 1, 2017 at 2:33 am #802284
    raymondshamoon

    Awesome. Thank you for the reply. I’m just not sure how to hide sliders from mobile or vice versa?

    June 1, 2017 at 6:18 am #802346
    John Torvik

    Hi,

    Just add the following custom CSS code:

     @media only screen and (max-width: 500px) {
     #av_section_1 {
      display: none !important;
     }
}

    Best regards,
    John Torvik

    June 1, 2017 at 6:34 am #802358
    raymondshamoon

    Hi 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?

    June 1, 2017 at 2:53 pm #802568
    Jordan Shannon

    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

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.