Hi all
I'm hoping some wise person can help but I have a feeling I may be trying to do the impossible.
To set the scene...
- We use a point-of-sale and stock management system which also integrates with our website and eBay listings.
- eBay listings are created inside of the POS system
- we can edit what goes into the description field, including adding HTML and inline CSS in this section.
- we can also add a header and footer which can have their own HTML and inline CSS added.
The listing software puts the header, description and footer inside a <div> which we don't have the ability to edit. This <div> has a fixed width of 978px set via inline CSS:
Anything we can edit sits inside this <div>.
978px is narrower than the relevant section on eBay and left as is, the listing looks weird.
I appreciate the simple solution is to have the software company adjust this setting and we're pushing for this but it doesn't seem likely to happen.
So I'm trying to do what I can.
So far I've been able to make individual elements "break out" from the div, as follows. "width: 100vw" seems to work (I will put the image in its own div and control the width of that rather than stretching the image itself but I expect that will work the same) and "position: absolute; width: 100%" seems to work except that if I use that for the main body of text it will overlay the main div (which has a border I can't get rid of) and the small amount of text (a part number) which we can't control.
What I have been unable to do and would like to achieve is to force the parent <div> to stretch to accommodate child items rather than just allow those child items to burst out from it.
I can't edit external style sheets, anything in the <head>, or inline CSS of the parent <div>. I can edit inline CSS for any element, or add another new element, inside the parent <div>.
Can this be done, please?
Thanks in advance for any help.
I'm hoping some wise person can help but I have a feeling I may be trying to do the impossible.
To set the scene...
- We use a point-of-sale and stock management system which also integrates with our website and eBay listings.
- eBay listings are created inside of the POS system
- we can edit what goes into the description field, including adding HTML and inline CSS in this section.
- we can also add a header and footer which can have their own HTML and inline CSS added.
The listing software puts the header, description and footer inside a <div> which we don't have the ability to edit. This <div> has a fixed width of 978px set via inline CSS:
Code:
<div style="display: block; width: 978px; border: 1px solid #e5e5e5; background: #fff; font-family: Arial, Helvetica, sans-serif; color: #666; font-size: 10.5pt; line-height: 150%">
</div>
Anything we can edit sits inside this <div>.
978px is narrower than the relevant section on eBay and left as is, the listing looks weird.
I appreciate the simple solution is to have the software company adjust this setting and we're pushing for this but it doesn't seem likely to happen.
So I'm trying to do what I can.
So far I've been able to make individual elements "break out" from the div, as follows. "width: 100vw" seems to work (I will put the image in its own div and control the width of that rather than stretching the image itself but I expect that will work the same) and "position: absolute; width: 100%" seems to work except that if I use that for the main body of text it will overlay the main div (which has a border I can't get rid of) and the small amount of text (a part number) which we can't control.
Code:
<h1 style="width: 100vw !important; color: black !important; text-align: center;">
Drover Cycles
</h1>
<img style="width: 100vw !important;" src="https://www.drovercycles.co.uk/wp-content/uploads/2022/03/DC_temp_banner.jpg" alt="Drover Cycles" width="956" height="160">
<div style="width: 100vw !important; margin: 0 auto; border: none !important; color: black !important;">
<p>SOME TEXT
</p>
</div>
Some Text here generated by the listing software which we can't directly control
<div style="position: absolute; width: 100% !important; border: none !important; color: black !important; text-align: center;">
Footer text here we can control, this bit seems to work how we want
</div>
What I have been unable to do and would like to achieve is to force the parent <div> to stretch to accommodate child items rather than just allow those child items to burst out from it.
I can't edit external style sheets, anything in the <head>, or inline CSS of the parent <div>. I can edit inline CSS for any element, or add another new element, inside the parent <div>.
Can this be done, please?
Thanks in advance for any help.