Jump to content

Make prestashop 8's Text Block responsive

Maria Gonzalez
 Share

Recommended Posts

Maria Gonzalez Contributor

Maria Gonzalez

Posted
Posted

I'm trying to make a "Text Block" on prestashop 8 responsive, but the widgets on that module only offers tables, not divs.

I'm getting this code : 

  

<h1 style="text-align: center;">HEADER</h1>
<p style="height: 28px;"></p>
<table width="1073" style="height: 53px;">
<tbody>
<tr>
<td>
<h1 style="text-align: center;"><strong><img src="http://prestashop-test.com/img/cms/1_green-svg%2060.png" alt="" width="60" height="50" /></strong></h1>
<h1 style="text-align: center;"><strong>01</strong></h1>
<p style="text-align: center;">Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</td>
<td>
<h1 style="text-align: center;"><img src="http://prestashop-test.com/img/cms/2_green-svg%2060.png" alt="" width="60" height="50" /></h1>
<h1 style="text-align: center;">02</h1>
<p style="text-align: center;">Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</td>
<td>
<h1 style="text-align: center;"><img src="http://prestashop-test.com/img/cms/3_green-svg%2060.png" alt="" width="60" height="50" /></h1>
<h1 style="text-align: center;">03</h1>
<p style="text-align: center;">Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</td>
</tr>
</tbody>
</table>


 


however I'll like something more like this : 

  

<body style="background-color: #f3f1f1cc; font-family: Arial, sans-serif; margin: 0; padding: 0;">
<h2 style="color: #3289ed; text-align: center; font-size: 4rem; margin: 0;">HEADER</h2>
<div style="height: 100vh; display:flex; justify-content: center; align-items: center; gap: 3em; flex-grow: 1; padding: 0 40px;">
    <div style="width: 21em; height: 25em; background-color: #fff; box-shadow: 5px 5px 25px #0000005f; padding: 10px 30px; border-radius: 10px;">
        <h1 style="color: #3289ed;">01</h1>
        <p>
            Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  
        </p>
    </div>
    <div style="width: 21em; height: 25em; background-color: #fff; box-shadow: 5px 5px 25px #0000005f; padding: 10px 30px; border-radius: 10px;">
        <h1 style="color: #3289ed;">02</h1>
        <p>
            Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  
        </p>
    </div>
    <div style="width: 21em; height: 25em; background-color: #fff; box-shadow: 5px 5px 25px #0000005f; padding: 10px 30px; border-radius: 10px;">
        <h1 style="color: #3289ed;">03</h1>
        <p>
            Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  
        </p>
    </div>
</div>
</body>

If I try to insert directly the div version, it does not work as expected....


Any solution?

Thanks


I've try to insert the div code in the source code of the "Text Block". Did not work.

 

Link to comment
Share on other sites
ObtainHigh Newbie

ObtainHigh

Posted
Posted 
<body style="background-color: #f3f1f1cc; font-family: Arial, sans-serif; margin: 0; padding: 0;">
<h2 style="color: #3289ed; text-align: center; font-size: 4rem; margin: 0;">HEADER</h2>
<div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1em; padding: 20px;">
    <div style="flex: 0 1 21em; background-color: #fff; box-shadow: 5px 5px 25px #0000005f; padding: 10px 30px; border-radius: 10px; margin: 10px;">
        <h1 style="color: #3289ed; font-size: 2em; text-align: center;">01</h1>
        <p style="text-align: center;">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        </p>
    </div>
    <div style="flex: 0 1 21em; background-color: #fff; box-shadow: 5px 5px 25px #0000005f; padding: 10px 30px; border-radius: 10px; margin: 10px;">
        <h1 style="color: #3289ed; font-size: 2em; text-align: center;">02</h1>
        <p style="text-align: center;">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        </p>
    </div>
    <div style="flex: 0 1 21em; background-color: #fff; box-shadow: 5px 5px 25px #0000005f; padding: 10px 30px; border-radius: 10px; margin: 10px;">
        <h1 style="color: #3289ed; font-size: 2em; text-align: center;">03</h1>
        <p style="text-align: center;">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        </p>
    </div>
</div>
</body>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...