Home page hero styling adjustments

[BigActual]

Feature Request

• The hero product image is cut off on the left side on mobile and tablet handhelds
• The hero product description is cut off on the right side on mobile and tablet handhelds
• Hero image requires adjustments to styling to prevent the next event from overshadowing the hero product description

Do you have mocks of what the feature should look like? If so, please include them (Preferably as a JPEG, pasted into the Issue content)

[d4mation]

This is mainly caused by the fact that the Hero is a "Revolution Slider". As in, the Theme is including the CSS/JS for Revolution Slider within its own code, but none of the PHP for building it with their backend functionality. It appears that this is causing it to not work correctly and it doesn't look good on multiple different screen-sizes.

Is there a reason that a Slider is in place here? I'm wondering if replacing this with something that is static and more responsive and less reliant on (a broken inclusion of) Rev Slider would be beneficial here.

[BigActual]

Do I understand that you are saying there are two choices here? Either add in all the PHP required by Revolution Slider or Replace it with something else? What is the alternative you would suggest?

[d4mation]

Correct.

I would suggest not using a slider at all in the hero area and instead using something static (as in, not moving. It would be dynamically generated). But I figure the decision will ultimately be to implement Rev Slider to preserve functionality.

[BigActual]

Spoke with the client on this. They're planning to keep the same layout on each slide and spin through their top 4 horns. Keep it. Login details pm'ed to you.

[d4mation]

Did you purchase this for them, or was it done with their own email address?

I need to have my computer "verified" in order to log in to Code Canyon.

I have an email to them about this waiting in HelpScout as a draft if it was done under their own email address.

[d4mation]

I've implemented this on the WP Engine server. It pulls data in the exact same way as it did before, it just now uses Rev Slider as a plugin in order to do it. I tried to match the previous styling as close as I could and it seems to be there to me.

Hero image requires adjustments to styling to prevent the next event from overshadowing the hero product description

What needs to be done here, exactly? Just tone done the text color? The Event has more text than the product descriptions which I think may be the major problem here.

[BigActual]

It was more about the text actually overlapping on small screens. If you inspect the page using the pixel and then as the iPad, you should see the discrepancies.

[d4mation]

Hmmm, that gets a little tricky. When implementing this, I actually ended up hiding the little triangle overlay and hiding the Events on Mobile and Portrait Tablet because with how narrow the screen was, it made positioning the Event Data within it pretty much impossible.

In this mock, I even widened the container for the Event Data and it still does not work well:

My only guess at a solution would be to display the Event Data outside of the Hero on these narrow breakpoints. Either that, or in the bottom area of the Hero?

[BigActual]

I like the idea of moving it under the hero product. On small screens, change the triangle to a rectangle that extends from side to side under the View Instruments Button and put it right there. The rectangle would give visual separation and present the event as if it were a second content box. Even though it really is not.

[BigActual]

• There is a technical issue. I'm not seeing the featured image on the home page. Here's a screenshot:
• Client couldn't see it either, so we talked hypothetically about how best to display it and we agreed to resize the event featured image so that it displays at 150 by 150 centered in the column.
• On Mobile, @d4mation and I discussed hiding the event portion of the slide and presenting a new view under the slider. Will we be able to review that today or do you think Monday?