Issue with front page banner image

  • jadain

    (@jadain)


    8 years, 7 months ago

    Hi,

    I have been using the Vega theme for a while now and absolutely love the features. However, I’ve recently noticed that my front page banner image does not display correctly on anything but a large screen. I’m fairly certain that it was not like this when I first set it up.

    On medium and mobile view, the right side of the image gets cut off in a terrible way. I’ve tried some CSS to adjust it but to no avail.

    I did read some support topics that indicated that it was an issue with how the parallax was being handled and I did try to create a child theme with the suggestions offered to fix the issue but when I did, the banner vanished almost entirely in mobile view. It’s possible that I wasn’t able to get all of the pieces needed for the child theme.

    Can you please offer some advice on how to fix it? Essentially I need the banner to show the right side and have it fit in a responsive way. I’m ok with it cutting off the left side as it’s a generic background.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author lyrathemes

    (@lyrathemes)

    8 years, 6 months ago

    @jadain Thanks for reaching out. I am happy to help.

    The top parallax container is an area that has the banner image as a background. The background covers to fill the entire space but crops the image based on the aspect ratio of the space it has to fill vs. the original image dimensions.

    Since the space starts off long and thin (wider than it is high), an image of similar dimensions is best suited for this spot. However, on mobile views, the space aspect ratio changes and while we adjust the CSS accordingly – some of the image is lost.

    We could use some custom CSS to help you adjust the mobile views of your website but my suggestion would be to use a more abstract image for this area or move the main “content” of the image towards the center so it is retained on all resolutions.

    Let me know if that makes sense and if you have any further questions.

    Thread Starter jadain

    (@jadain)

    8 years, 6 months ago

    Hi,

    Thanks for the reply. 🙂

    I understand why it does that but the site owner neither wants a generic image nor can I really move the content of the image (ie the face) toward the center of the image, or the text will be placed over it. And the site owner doesn’t want that either.

    I did try some custom CSS but wasn’t successful in getting the image to crop any differently. In fact, nothing I tried made a difference. The image stayed the same regardless. I tried forcing it to align differently in mobile and doing contain rather than cover, but neither worked. What custom CSS would you suggest?

    I’d really hate to have to abandon the theme because of this one thing so I’m really hoping you can help.

    Thanks much!

    Thread Starter jadain

    (@jadain)

    8 years, 6 months ago

    Hi again,

    No follow-up to my last question? I was wondering what custom CSS you might be able to suggest.

    I’ve seen other people get help with this exact issue but some of the file links weren’t active anymore so I couldn’t implement it myself.

    Thanks!

    Theme Author lyrathemes

    (@lyrathemes)

    8 years, 6 months ago

    @jadain Sorry for the delayed response. In this case – I would suggest using the “as-is” banner option included in the Banner Settings. Let me know how that goes.

    Thread Starter jadain

    (@jadain)

    8 years, 6 months ago

    Hi,

    Thanks for the reply. The as-is banner option makes it even worse. The banner does not retain its height when swapped to that option and scrunches down to a pretty thin line.

    I’m sorry to say that I’ll have to find a different theme that will work better for us instead.

    Theme Author lyrathemes

    (@lyrathemes)

    8 years, 6 months ago

    @jadain If you’re still using Vega, I’d like to see why the banner showed up malformed for you when using the as-is option. Please feel free to reach out to us at https://www.lyrathemes.com/support/

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Issue with front page banner image’ is closed to new replies.