Text not wrapped around image on main events page since update 4.2.1

[Nicolas]

Hi guys,

I noticed since the last update (4.2.1), that the text is not wrapped around the event’s featured image, on the event home page (ex: yourdomain.om/events/).

Now, the event summary appears below the image, instead of wrapped around it (image on the left, text wrapped on the right): http://www.fleamapket.com/listable/events/

I tried to to address the issue by adding the following CSS to my child theme CSS file, but it did not work:

body .tribe-events-list .tribe-events-event-image+div.tribe-events-content {
width: 60%;
}

Could you please do something about it? It was working just great before. Now the page looks empty.

Thanks!

[Andras]

Hi Nicolas,

I’m sorry you are having this issue since the update. Let me help you with that.

The image is displayed in bigger size than it was before, so you might want to make that smaller too.

Try using this css snippet as a sample, I’ll put some notes below:
.tribe-events-list .tribe-events-event-image {
width: 30%;
}
.tribe-events-list .tribe-events-event-image + div.tribe-events-content {
width: 67%;
}
You can adjust the sizes to your liking, just make sure they add up to 97%, because the image has a 3% right margin that also needs to be included.

 

If you would like to make the whole content wider, then add this as well, adjust as needed:
.page .entry-content {
max-width: 1080px; /* this will define the width */
}
.events-list .tribe-events-loop {
max-width: 100% !important;
}
 

Let me know if this helps.

Cheers,
Andras

[Nicolas]

Hi Andras,

Wow, thank you SO MUCH! I really, really appreciate you taking the time to answer my query + suggest some tips to make my website look even better (making content wider). As a matter of facts, a month ago I asked a question about how to make content wider, and I was told that this was not possible 🙁 But really glad to see that you spontaneously suggested it!

I’ve implemented both CSS tweaks, and here’s my feedback:

.tribe-events-list .tribe-events-event-image {
width: 30%;
}
.tribe-events-list .tribe-events-event-image + div.tribe-events-content {
width: 67%;
}

When implemented, this CSS snippet solves the problem I was having on desktops. However on mobile, content appear super small and justified left (see image “content_small_and_justified_left.png”) vs. when CSS snippet is not implemented (see image “no_modif_to_CSS.png”).

The cool thing, is that when I implement ONLY the CSS snippet below (to make whole content wider), it solves the text/image wrapping issue I was having. I don’t even have to implement the CSS snippet above.

.page .entry-content {
max-width: 1080px; /* this will define the width */
}
.events-list .tribe-events-loop {
max-width: 100% !important;
}

but then, if I only use this CSS snippet, some images appear super big on desktop (see image “desktop_bug.jpg”). This issue goes away on desktops if I use both CSS snippets you kindly gave me. But once again, if I use both snippets, I have this issue on mobiles (see image “content_small_and_justified_left.png”).

I think we’re heading in the right direction 🙂 But if you have any advice to solve this smartphone bug or this desktop image size bug, this would be awesome 🙂

Thanks again for all your help!

PS: one other bug I noted on smartphones, is that nav buttons located at the bottom of each page, appear super thin; you can’t almost see them (see image: “super_small_browsing_buttons.png”). Any idea if some css snippet could solve this bug?

[Nicolas]

Hi Andras,

Following on the reply I posted yesterday, here is a tiny “bug” I identified when using the CSS snippet to make the whole content wider

.page .entry-content {
max-width: 1080px; /* this will define the width */
}
.events-list .tribe-events-loop {
max-width: 100% !important;
}

When the above snippet is implemented in the theme’s CSS, theme breaks on some pages: http://www.fleamapket.com/listable/listings/

but not on taxonomies-based pages (tags, categories or regions):
http://www.fleamapket.com/listable/listing-region/asia/

Is it possible to define in the CSS snippet, which pages should be excluded (or the pages for which this snippet applies)? ex: “css snippet only applies to TheEventCalendar page”

Thanks for your answer!

[Andras]

Hi Nicolas,

I’m sooooo happy it helped, so let’s try to take it a step further. I’ll start with your 1st reply from 11:31.

If you want to rearrange the looks only on desktop, then you can add a so-called media query, like this:
@media screen and (min-device-width: 1200px) {
.tribe-events-list .tribe-events-event-image {
width: 30%;
}
.tribe-events-list .tribe-events-event-image + div.tribe-events-content {
width: 67%;
}
}
This basically says, that if the screen resolution is at least 1200 px, then it should use the css defined. Otherwise leave the original. That should leave the original looks on mobile.

You can, of course, adjust the 1200px to your liking, but wouldn’t recommend to go too low. Some mobile devices have 1024px width when in landscape.

You can search around more on the topic typing css media queries in google.

Let me know if this solution works for you.

 

Now on the second one:

When the above snippet is implemented in the theme’s CSS, theme breaks on some pages

Hmmmm… I checked your 2 links, but didn’t see any difference. Anyway, yes, it is possible to limit it to certain pages or page templates. Though implementation might be different based on the theme you are using.

If you open the developer tools of your browser (usually via pressing F12), then you will be able to see the HTML code of your site. In the < body > tag you will see lots of classes listed. There are usually specific classes used for different templates or the Events Calendar pages. There might also be a unique identifier for a page, e.g. for your listings page there is page-id-8 in the class list.

So starting from that, you need to add the specific class to your definition. Let’s say you want the css to be applied to only your listing page, then do this:
.page-id-8 .entry-content {
max-width: 1080px; /* this will define the width */
}
If you only want the asia page like that, then you can use:
.tax-job_listing_region .entry-content {
max-width: 1080px; /* this will define the width */
}
If you want both, then:
.page-listings .entry-content {
max-width: 1080px; /* this will define the width */
}
because the page-listings class will be present on all pages that do the listing.

I’m sure you get the idea. 🙂

I hope this helps you move forward. Let me know if you have any followup questions in this topic. I’ll be happy to help.

(If you would have questions regarding another issue, then I kindly ask you to open a new thread 1) to keep things clean; 2) easier for us to manage; 3) you most probably will get faster reply.)

Cheers,
Andras

 

 

[Nicolas]

Hi Andras,

Thank your for your (super detailed!) answer: that helped me a lot.

I followed your advice and tweaked the code you provided me with (to increase content width on page), so the snippet would apply only to the page where the calendar is featured (and would therefore not impact the listing page). This is what the final code looks like:

.post-type-archive-tribe_events .entry-content {
  max-width: 1080px; /* this will define the width */
}
.events-list .tribe-events-loop {
max-width: 100% !important;
}

It seems to be working fine so far.

Now, regarding the code used to properly have text wrapped around the event’s images (instead of below the image), it worked too! All screen above 1200px display the snippet, while smaller screens stick to the original css. What’s funny though, is that this snippet only works on mobiles; if I test it from my desktop on a browser’s window the size of my mobile screen, it takes into account the original size of my desktop screen and does not display the optimal view for mobiles.

Anyway, your advices helped me patch my website 🙂 I hope the next update won’t break everything.

Have a great day!

[Andras]

Hi Nicolas,

I’m glad your website is all patched! I know how good that feels. 🙂

To make it work on browser resize as well, just exchange “min-device-width” to “min-width” and then it should properly work in the browser as well.

When we release a new version, the plugins go through thorough testing, Q&A and whatnot. But since we cannot possibly test every scenario, theme and plugins, some bugs sneak through. This is where our community, including yourself, are a big help to us. Without you, we couldn’t make our plugins better and better. So thank you as well!

Since you marked this ticket resolved I will go ahead and close it. In case you have any other questions or come across any bugs, do not hesitate to open a new one. We’ll be here to help. 🙂

Cheers,
Andras

PS: If you like our plugins then we would welcome a review in the WordPress plugin repository. Thanks!

[Author]

Posts