Paragraph Breaks Not Working?

General ShopSite user discussion

Paragraph Breaks Not Working?

Postby koryb1 » Wed Oct 28, 2015 7:52 am

I am building a new ShopSite site (my second) and am using the Deskman theme. When I use <p></p> tags in the More Information Text field, I am not getting paragraph breaks. Instead I am getting line breaks. As an example:

<p>This is line 1.</p>
<p>This is line 2.</p>

Does NOT render as:

This is line 1.

This is line 2.

Instead I get:

This is line 1.
This is line 2.

I have not made any changes to the templates or CSS.

On my other ShopSite site I use these same tags and they work as expected. What do I need to do to get them to act the same way on my new site?

Thanks in advance!

Kory
koryb1
 
Posts: 88
Joined: Tue Feb 14, 2012 7:10 pm

Re: Paragraph Breaks Not Working?

Postby Jim » Wed Oct 28, 2015 10:15 am

The style for p tags is overridden in the full.css file

Code: Select all
p {
    text-align: justify;
}
p, div {
    margin-bottom: 0;
    margin-top: 0;
}


So the default action of the <p> will not display. You will need to modify the css in the full.css file if you want it to display differently.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah

Re: Paragraph Breaks Not Working?

Postby koryb1 » Wed Oct 28, 2015 12:26 pm

Thanks Jim for shedding some light on this. I am familiar with the process of editing that css file, but am not 100% certain what the edit should be. Could you please clarify? In the full.css file I find this:

p {text-align:justify; text-justify:inter-word;}

Note the above appears in the css in 3 different places.

Are you suggesting that I replace the above with the code you provide below?

Thanks again!
koryb1
 
Posts: 88
Joined: Tue Feb 14, 2012 7:10 pm

Re: Paragraph Breaks Not Working?

Postby Jim » Wed Oct 28, 2015 12:53 pm

I'm not a css expert but my guess is that it would be coming from the
Code: Select all
p, div {
    margin-bottom: 0;
    margin-top: 0;
}

section.

I think that code makes it so there is no spacing on the top or bottom of the text.
According to http://www.w3schools.com/tags/tag_p.asp the default style for a <p> tag for most browsers is
Code: Select all

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}


So you could add that code to the bottom of the full.css and it should override all previous definition in the file. You could try this out by putting the style in one of the text fields for a page and republishing. Use this code on html pages, or in ShopSite text fields, so you have the <style> tags around the code
Code: Select all
<style>
p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}
</style>
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah

Re: Paragraph Breaks Not Working?

Postby koryb1 » Wed Oct 28, 2015 1:39 pm

This was everything I needed Jim - thank you! Testing with the style tags in a Product text field worked, and then I added the code to the bottom of the full.css file for a site wide fix. All is well - thank you again!

Have a great night,

Kory
koryb1
 
Posts: 88
Joined: Tue Feb 14, 2012 7:10 pm


Return to User Forum

Who is online

Users browsing this forum: No registered users and 49 guests