Docs

[Cherylwoodman]

Hi Themeco,

I’ve been having a few spacing problems with the accordions in a page I’ve built on cornerstone – http://www.honestyforyourskin.co.uk/store.

Although there is a line break when I view in edit mode, this is ignored in the visual seen here… http://screencast.com/t/5lnnaTh1jNT

Can you help…

Cheryl

[Rupok]

Hi Cheryl,

Thanks for writing in! I can see like this that’s not same as your screenshot I believe – http://prntscr.com/cc549u

Would you check again from a different browser and confirm the issue?

Thanks!

[Cherylwoodman]

Hi Rupok,

I’ve just checked with IE and the issue is the same… it’s not happening on all of the accordions, if you scroll down to the ‘renew antioxidant night oil’ and open the reviews tab, you can see the effect here…

It’s also happening on the reviews tab of each product below this one…

Cheryl

[Friech]

Hi Cheryl,

Instead of using a <br /> tag, would you mind wrapping the name and stars on a different <div>?

e.g.

<div class="reviewer">
	– <strong>Ruth W.</strong>
	<i class="x-icon x-icon-star" data-x-icon="" aria-hidden="true" style="display: inline-block;"></i>
	<i class="x-icon x-icon-star" data-x-icon="" aria-hidden="true" style="display: inline-block;"></i>
	<i class="x-icon x-icon-star" data-x-icon="" aria-hidden="true" style="display: inline-block;"></i>
	<i class="x-icon x-icon-star" data-x-icon="" aria-hidden="true" style="display: inline-block;"></i>
	<i class="x-icon x-icon-star-half-full" data-x-icon="" aria-hidden="true"></i>
</div>

We can make the name display block, but that means the name wont inline with the stars.

Thanks.

[Cherylwoodman]

Hi Friech,

I’m not actually using any tags at the moment as i’m editing in the accordion element in cornerstone. However when I do add a <br/> tag, there’s no change in formatting.

I’ve added the formatting you’ve suggested & this is the new formatting I receive with the stars spaced vertically -> http://screencast.com/t/XDekRVaHqIv

It doesn’t seem to work any better…

Cheryl

[Paul R]

Hi Cheryl,

Can you provide us your wordpress admin login so we can take a closer look.

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Cherylwoodman]

This reply has been marked as private.

[Rupok]

Hi Cheryl,

Thanks for writing in! It’s happening because you are editing the content through Text mode but not using the paragraph tag to wrap the text. Either you need to use the “Visual” mode and use line break (Return Key) to create the space. If you keep editing through “Text” mode; make sure to wrap the text with <p></p> tag.

Meantime you can add this under Custom > CSS in the Customizer.

.x-accordion-inner > p {
  margin-top: 10px;
}

This will create the spacing as well but I’d suggest you to follow the above suggestion.

Cheers!

[Cherylwoodman]

Thanks Rupok – I’ve edited with paragraph tags in text mode which works…

The strange part is that if I edit in visual mode, the return key looks like it’s produced a gap in the edit area, then when I view the page – it hasn’t. Perhaps this is because I’d copied & pasted the text into the text edit area first, before switching to visual?

[Paul R]

Hi Cheryl,

I tried adding a space both in visual and in text and it seems to be adding a space when the page is viewed.

So I’m not sure what happened there.

Can you try again in your end.

Thanks

[Author]

Posts