Right hand margin

Actually, I have just realised that the margin is probably correct, it is the size of the main text area that is too wide (I think)

Hey there @andrewleonard!

I’m happy to help you out with that. ??

Taking a quick look a the code inspector, it looks like div.right component has float:right properties. Changing this to float:none (or just removing the line if you added it) seems to fix the text overlap issues for your code table.

Let us know if this helps!
Ed

I am afraid not
I put this code in the widget

<style>
.right {<br />
    float: right;<br />
    width: 260px;<br />
}<br />
</style>

The reason for this is because there is an overlap between the main text and the content sidebar and this is a simple solution that I can perform
What I think is wrong is that the main text is coming over too much to the right and I have no idea how to fix that

BTW, I am looking at the website on a desktop, with a monitor 1920 x 1080
At a screen width of below 770 it seems to work OK, above that the main text area runs into the content sidebar
Do you understand what I mean?

Hey again @andrewleonard,

I see what you are talking about. It behaves the same way for me when the browser is resized.

This is definitely a conflict with the theme’s p CSS as well as the max-width property being set to 1200px. I would try creating a custom stylesheet and changing the max-width to a smaller value, this way the content is not allowed to stretch over top of your code table.

Unfortunately since our free support doesn’t really cover theme customizations, I can’t get super in-depth about this – but hopefully that works for you. I also suggest taking a look at our Themer’s Guide as well as running through our testing for conflicts steps if there’s still no luck.

Cheers!
Ed

Before you go, can you explain why it is only this page that “misbehaves”
https://ebps.org.uk/?post_type=tribe_events
Not only that but it is only “List” view that misbehaves, “Month” view works OK
All the other Event pages behave properly
I may well be wrong but that suggests to me that something is wrong in the coding for this page
If I am correct then the problem lies with you and you would be able to offer free support
Let me know what you think

I have a confession
I removed all the css code from my child theme style.css and your page worked
So I have introduced the problem but I don’t know how

I have been playing with this and I have added this code to my child theme
.events-archive .entry-content,.events-archive .entry-header{width:auto}
It seems to work now and overwrites this code in your css: tribe-events-full.min.css
.events-archive .entry-content,.events-archive .entry-header{width:98%}
I would be interested in you comments

Hey again @andrewleonard!

Kudos to you for getting it fixed!

The max-width property is no longer in your code, so it must have been part of your child theme style.css.

The reason this was only happening on the events page is because of the code table being present, since it occupied a percentage of the layout it smashed the other elements together.

As for the CSS you pointed out, this code just makes sure that the event information is stretched across area that the theme has configured for it. Since it was using a percentage, it would occupy 98% of the parent element which in the case that you had, the parent element was wider that it needed to be hence the stretched content.

Hope that helps!

Take care,
Ed

Hey there,

Since this thread has been inactive for a while, I’m going to mark it as resolved.

Please feel free to create a new thread if you need help with anything else!

Ed ??