Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

Not quite working that way. It seems to still be controlled around line 448 of the responsive mobile. In addition to your suggestions, removing the width and changing the float to right in the following helped

Code:

---

/*bof checkout*/
#checkoutPayment .forward, #checkoutShipping .forward{float:none;width:95%;}

---

to

Code:

---

/*bof checkout*/
#checkoutPayment .forward, #checkoutShipping .forward{float:right;}

---

then it is still controlled by the width in

Code:

---

fieldset input[type=date], fieldset textarea, fieldset div, fieldset .inputLabel{width:90% !important;margin:0  0 0 20px !important;padding:0;}

---

:frusty:

Hi Rbarbour, Thank you for you reply, First the site address is https://www.brocante-de-france.com/i...ex&language=en
At the moment I have used a table to create the layout seen directly in the admin/define pages/main_page_php as below
<table style="width:100%">
<tr>
<td><h1>Brocante de France</h1>
<p>Our aim is to offer you a fabulous range of products to help you create the home of your dreams,
from hand tools for the DIY work, to antique and hand crafted lighting.</p>
<p>Our range of products are both domestic and proffessional quality, manufactured in europe, and known world wide
for their quality. Use coupon code<strong>welcome</strong> to receive a 10% discount off your first purchase.</p></td>
</tr>
<tr>
<td><h1>Kitchen</h1>
<p>kitchen utensils, pots and pans, and cooking accessories from major europeen manufacturers,
for the home, outdoor and camping</p<></td>
<td><h1>Knives</h1>
<p>Knives for cooking, eating, gardening and outdoor activities, all selected for
their robustness and practicalities</p></td>
</tr>
<tr>
<td><h1>home decoration</h1>
<p>A superb selection of designer fabrics to decorate your home,
and a range of hand made lampshades made from modern and antique fabrics</p></td>
<td><h1>Hand tools</h1>
<p>For the discerning home craftsman and builder, a range of high qaulity tools,
for woodworking,engerneering, plumbing and electrical instalation
</p></td>
</tr>
<tr>
<td><h1>Brocante</h1>
<p>Here is our passion, the search for both antique and vintage treasures for creating that detailed
finish, modern products cannot provide. Antique and vintage lighting, ornaments, paintings and fabrics from
the victorians to the roaring seventies.
</p></td>
</tr>

</table>
But this is not controlable with css, I would prefer to use the following;
<div id="divone">
<h1>Brocante de France</h1>
<p>Our aim is to offer you a fabulous range of products to help you create the home of your dreams,
from hand tools for the DIY work, to antique and hand crafted lighting.</p>
<p>Our range of products are both domestic and proffessional quality,</p>
</div>

<div id="divtwo">
<h1>Kitchen</h1>
<p>kitchen utensils, pots and pans, and cooking accessories</p<>
</div>

<div id="divthree">
<h1>Knives</h1>
<p>Knives for cooking, eating, gardening and outdoor activities,</p>
</div>

<div id="divfour">
<h1>Home decoration</h1>
<p>fabrics and hand made lampshades,</p>

<div id="divfive">
<h1>Hand tools</h1>
<p>hand tools for the DIY work</p>

<div id="divsix">
<h1>Brocante</h1>
<p>a selection of antique and vintage accessories to finish you home.</p>
</div>
with the following css style written to the css stylesheet
<style>
#divone {background-color:#cc00cc;color:#ffffff;text-align:center;padding:5px;}
#section1 {background-color:#cc00cc;height:300px;width:350px;float:left;padding:5px;}
#section2 {height:300px;width:350px;float:right;padding:5px;}
#section3 {height:300px;width:350px;float:left;padding:5px;}
#section1 {background-color:#cc00cc;height:300px;width:350px;float:right;padding:5px;}
#footer {background-color:black;color:white;clear:both;text-align:center;padding:5px;}
</style>
but this is when it all goes wrong
Hope this helps you to find out where i am going wrong
fantastic work from all of you
Regards
Paul

Quote:

---

Originally Posted by albi1kenoby

Hi Rbarbour, Thank you for you reply, First the site address is https://www.brocante-de-france.com/i...ex&language=en
At the moment I have used a table to create the layout seen directly in the admin/define pages/main_page_php as below

but this is when it all goes wrong
Hope this helps you to find out where i am going wrong
fantastic work from all of you
Regards
Paul

---

Paul

try clearing your cache, I'm not seeing any layout issues.

Quote:

---

Originally Posted by rbarbour

Paul

try clearing your cache, I'm not seeing any layout issues.

---

Thanks RB, when you looked last the layout was with a table, now it is set out with the "div" style and css styling, which is my aim, allowing me to control each of the six divs with css for color font and background and size, but the lay out is lik this:https://www.brocante-de-france.com/i...ex&language=en
I want to add a screen shot but i dont know how!
Can I send you a private message with the html code that i am using?
regards
Paul

Quote:

---

Originally Posted by albi1kenoby

Thanks RB, when you looked last the layout was with a table, now it is set out with the "div" style and css styling, which is my aim, allowing me to control each of the six divs with css for color font and background and size, but the lay out is lik this:https://www.brocante-de-france.com/i...ex&language=en
I want to add a screen shot but i dont know how!
Can I send you a private message with the html code that i am using?
regards
Paul

---

With define pages you do not need to add body tags

you should move your css to index_home.css

<div id="indexDefaultMainContent" class="content"><body><-Remove
<div id="divone">
<h1>Brocante de France</h1>
<p>Our aim is to offer you a fabulous range of products to help you create the home of your dreams,
from hand tools for the DIY work, to antique and hand crafted lighting.</p>
<p>Our range of products are both domestic and proffessional quality,</p>
</div>

<div id="divtwo">
<h1>Kitchen</h1>
<p>kitchen utensils, pots and pans, and cooking accessories</p<<-Remove>
</div>

<div id="divthree">
<h1>Knives</h1>
<p>Knives for cooking, eating, gardening and outdoor activities,</p>
</div>

<div id="divfour">
<h1>Home decoration</h1>
<p>fabrics and hand made lampshades,</p>
</div><-Add

<div id="divfive">
<h1>Hand tools</h1>
<p>hand tools for the DIY work</p>
</div><-Add

<div id="divsix">
<h1>Brocante</h1>
<p>a selection of antique and vintage accessories to finish you home.</p>
</div>

</body><-Remove
</div>

<style>
#divone {background-color:#cc00cc;color:#ffffff;text-align:center;padding:5px;width:100%;}
#divtwo {background-color:#cc00cc;color:#ffffff;height:300px;width:50%;float:left;padding:5px;}
#divthree {height:300px;width:50%;float:right;padding:5px;}
#divfour {height:300px;width:50%;float:left;padding:5px;}
#divfive {background-color:#cc00cc;height:300px;width:50%;float:right;padding:5px;}
#divsix{background-color:black;color:white;text-align:center;padding:5px;width:100%}


</style>

Dear rbarbour,
Thank you so much for your in depth reply, I can see all my mistakes now!!!
i will put this right tomorrow and get back to you with an update, i will now be a ble to have the most important page of the site looking how i want it to, and easily updatable by remote css.
Thank you again for your hard work, I will be making a donation to buy you a bun
King regards
Paul

Quote:

---

Originally Posted by albi1kenoby

Dear rbarbour,
Thank you so much for your in depth reply, I can see all my mistakes now!!!
i will put this right tomorrow and get back to you with an update, i will now be a ble to have the most important page of the site looking how i want it to, and easily updatable by remote css.
Thank you again for your hard work, I will be making a donation to buy you a bun
King regards
Paul

---

Thank you, glad I could help!

Quote:

---

Originally Posted by dbltoe

Not quite working that way. It seems to still be controlled around line 448 of the responsive mobile....

---

Wentr back and reviewed the changes suggested in post above. It did not work until we removed the width:85% !important call around Line 212 for the fieldset.
Of course, that would munge the ENTIRE world.
:frusty:

Haredo has turned on the site. No longer at haredoDOTcom/155a_test. Now at haredo.com. Still with alignment problem in mobile portrait with checkout.
Suggestions?

Quote:

---

Originally Posted by haredo

.css Issue with 155a in portrait views with cell phones

Android Portrait view and iphones portrait views. When checking out of the shopping cart the shipping option are way out of line and also the checkout total on the next page the spacing is wacked ...
Any ideas?????
www . haredo dot com/155a_test

---

ok, here goes

in:

Code:

---

includes/templates/responsive_classic/css/responsive_mobile.css

---

after line 77 ADD

Code:

---

/*ZCA*/
#checkoutShipping fieldset .important.forward { float: right; width:20%!important; }
/*ZCA*/

---

before the ORIENTATION:LANDSCAPE & ORIENTATION:PORTRAIT closing bracket

ADD

Code:

---

/*ZCA*/
.totalBox { float:right; width:15%!important; }
.lineTitle {  float:right; width:55%!important; }
/*ZCA*/

---

this is the easiest way without changing padding and margins which will mess something else up I'm sure.