Text from Define Page isn't collapsing viewing in smaller screen

[GraniteMan44]

I put the following info in my Define Pages, and it looks great on my 1280 x 800 screen. But when I bring up the site on another computer....the text doesn't collapse like the rest of the site. Anyone have an idea as to what I can do with this? Thank you in advance.


Here is my website:





<table border="0" cellpadding="4" cellspacing="0" width="680"> <tr>

<td><img height="153" width="200" src="images/medium/AngelStars_MED.jpg"></td>
<td><font size="4"><b>C</b></font><font size="2"><letter-spacing=.5px><b>umings Memorials has been providing beautiful, quality crafted granite monuments and markers, in the state of Michigan, since 1912. At Cumings Memorials, we take pride in the work that we do. Our purpose is to provide our customers with the quality craftsmanship and service that they deserve. We believe in a non-pressure approach that allows our customers to choose the monument or marker that best represents their loved ones cherished life. We listen to our customers to create the best tribute possible.</b></font></td>
</tr>
<tr>
<td colspan="2"><font size="2"><b>The basic styles of monuments and markers include slants, bevels (hickey or pillow), flat and uprights (for a visual idea as to the general shapes of these styles, look at our monuments and markers section). Within the upright style, there are many variations only limited by the imagination. Besides monuments and markers, we also offer many additional accessories to enhance the beauty of the memorials. Such amenities include: bronze (plaques and statuary), Memorial Lights (uses candles), Peace Lights (solar powered), urns, vases, and portraits (all of which can be purchased online). Services that we provide include cemetery lettering, brick lettering (for fundraisers) and fieldstone lettering. For those who wish to enhance the aesthetics of their yard, we offer many unique landscape products such as: granite stepping stones and granite benches. We also make granite and limestone signs.</b></font></td>


GraniteMan

[GraniteMan44]

monumentsplus.com/zen-cart

[gjh42]

<table border="0" cellpadding="4" cellspacing="0" width="680">

You have specified the width of your table to be 680 pixels.

To make it flexible you need to use a % width instead. Best practice would be to eliminate the table tags and styling, and make it a div, paragraphs and spans with properties styled in your stylesheet.

[GraniteMan44]

Thank you for that info. What would the code be for the div and where would I place it in my stylesheet? I have spent several days on this issue trying to make it right. I did take out all of the code in the define_pages interface for styling (tables etc.) but when I do that, I am unable to get the text to wrap around under the image. Again....thank you for your response.

GraniteMan

[gjh42]

<div id="defineMainText"><img height="153" width="200" src="images/medium/AngelStars_MED.jpg">
<p><span class="initial">C</span>umings Memorials has been providing beautiful, quality crafted granite monuments and markers, in the state of Michigan, since 1912. At Cumings Memorials, we take pride in the work that we do. Our purpose is to provide our customers with the quality craftsmanship and service that they deserve. We believe in a non-pressure approach that allows our customers to choose the monument or marker that best represents their loved ones cherished life. We listen to our customers to create the best tribute possible.</p>
<p>The basic styles of monuments and markers include slants, bevels (hickey or pillow), flat and uprights (for a visual idea as to the general shapes of these styles, look at our monuments and markers section). Within the upright style, there are many variations only limited by the imagination. Besides monuments and markers, we also offer many additional accessories to enhance the beauty of the memorials. Such amenities include: bronze (plaques and statuary), Memorial Lights (uses candles), Peace Lights (solar powered), urns, vases, and portraits (all of which can be purchased online). Services that we provide include cemetery lettering, brick lettering (for fundraisers) and fieldstone lettering. For those who wish to enhance the aesthetics of their yard, we offer many unique landscape products such as: granite stepping stones and granite benches. We also make granite and limestone signs.</p></div>

Add to your stylesheet

#defineMainText {font-weight: bold; font-size: 1.2em;}
#defineMainText img {float: left; margin-right: 1.0em;}
#defineMainText .initial {font-size: 2em;} 
#defineMainText p {margin: .5em .5em 1em .5em;}

Add, subtract & adjust to taste.

[GraniteMan44]

Most excellent. I will give that a try. Thank you for your time.

Greg

[GraniteMan44]

I put the following in my stylesheet but it doesn't affect it at all.



#defineMainText {font-weight: bold; font-size: 1.2em;}
#defineMainText img {float: left; margin-right: 1.0em;}
#defineMainText .initial {font-size: 4em;}
#defineMainText p {margin: .5em .5em 1em .5em;}
#defineMainText p {word-spacing: 2.0em;}


Am I supposed to do something somewhere else too?

[gjh42]

Did you paste the html code I gave into your define_main_page.php?

[GraniteMan44]

I put the HTML code in the stylesheet and in define pages. Was that the right thing to do?

[gjh42]

HTML never goes in the stylesheet. It should be in /includes/languages/english/html_includes/your_template/define_main_page.php.

Also, there should not be anything else in define_main_page.php - no html <head> or <body> tags or the like.