Announcement

**Goz** · 17-Jan-2019, 04:23 PM

Hi Tony.... for a start.... never rely on the SellerDeck design tab to see how a page is going to look! Always do a page preview.

Having a quick look, there is a CSS class declaration for "div[id^="idVars"] .attribute-list" which has float:left and width:100%

Changing that to float:none and width:16em does the trick for me.

Several caveats....

I'm doing this in Firefox browser so not tested elsewhere
I'd probably add a specific class to make those changes
Not tested in mobile

**tonygg** · 17-Jan-2019, 05:52 PM

Hi,

Thank you for taking as look. I really appreciate it. I have made the change and it is on that test product. It seems to work on Edge and Chrome (although I need to clear browsing cache to get it to update).

The change gets me closer but has uncovered a second issue. It now starts off correctly on a PC. As you reduce the size of the window the attribute/component list quickly jumps below the image whilst the quantity and add to cart stay on the RHS. As you decrease the width the quantity and add to cart switch between RHS and underneath whilst the attribute/component list stays underneath. When the window is only the width of the image then everything lines up underneath.

I guess i need to find a way to group the attribute/component list, quantity and add to cart together so they move with each other. If you have any thoughts on how I can do this they would be very gratefully received?

Many thanks

Tony

**MattSMR** · 18-Jan-2019, 12:38 PM

Originally posted by tonygg View Post

Hi,

Thank you for taking as look. I really appreciate it. I have made the change and it is on that test product. It seems to work on Edge and Chrome (although I need to clear browsing cache to get it to update).

The change gets me closer but has uncovered a second issue. It now starts off correctly on a PC. As you reduce the size of the window the attribute/component list quickly jumps below the image whilst the quantity and add to cart stay on the RHS. As you decrease the width the quantity and add to cart switch between RHS and underneath whilst the attribute/component list stays underneath. When the window is only the width of the image then everything lines up underneath.

I guess i need to find a way to group the attribute/component list, quantity and add to cart together so they move with each other. If you have any thoughts on how I can do this they would be very gratefully received?

Many thanks

Tony

Hi Tony,

You need to review the overall structure of the page. In order to keep the elements together you'll need to group in to HTML div's

Consider how your overall page will appear across mobile, tablet and desktop applications. Desktop - I think you're almost there for your design. Consider grouping the left hand side of the page and the right hand side of the page, and then subdividing the right area. You'll want to keep the choices, quantity and add to cart together when the page is resized, and then have a seperate div for your description etc.

Easy way to understand this is to simply draw the website on a piece of paper, or by using software. Imagine you are building in boxes, and where those boxes need to go when the document size changes.

If you look at one of our product pages (https://www.castironradiators4u.co.u...-x-w215mm.html) you can see we've used this methodology. Images and choices are on the left part of product page, add to cart & controls on the right with description underneath. As you resize, these elements scale and then eventually stack.

You should look at building with CSS Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ & CSS media queries - https://www.w3schools.com/css/css3_mediaqueries_ex.asp

These go alongside basic HTML practices.

**tonygg** · 18-Jan-2019, 02:24 PM

Hi Matt.

Thank you. I really like what you have done with the single product page. It is very professional and clear. It is just what we need. Not sure if I am going to be able to emulate but I will look at the links and see if I can work it out. Did you do the work yourself?

I also really like the light box. Is that a commercial product?

Many thanks

Tony

**tonygg** · 19-Jan-2019, 03:46 PM

Hi Matt,

I think I have now got the single product page to move around ok. Thank you for your help.

I have being trying to see how to make the permutation box wider and increase the font. so it matches (approx) to the width of the quantity line and it is easier to read on mobiles. I guess I am looking in the wrong places in the css as I cant seem to make it any wider. any pointers would be gratefully received?

Many thanks

Tony

**MattSMR** · 21-Jan-2019, 12:30 PM

Originally posted by tonygg View Post

Hi Matt,

I think I have now got the single product page to move around ok. Thank you for your help.

I have being trying to see how to make the permutation box wider and increase the font. so it matches (approx) to the width of the quantity line and it is easier to read on mobiles. I guess I am looking in the wrong places in the css as I cant seem to make it any wider. any pointers would be gratefully received?

Many thanks

Tony

Hi Tony,

Code is not fully tested.

Find following references in your CSS. Please note, there may be other classes related to these code changes.

Width

div[id$="_Table"]

Change width from 300px to 217px

div.attribute-list div label, div.attribute-list div select

Change width from auto to 100%

This will make the line width the same as quantity.

Font size

.form_input_general
Change font size to 14px.

All of these should exist in actinic.css - should be your primary stylesheet.

**tonygg** · 22-Jan-2019, 03:49 PM

Hi Matt,

Thank you. That sorted the alignment out.

I really hate to say it but ....

I had some custom javascript written to help with checking stock quantity before ordering. I uses the radio button layout to know what permutation the customer is selecting rather than the drop down list. It is quite big and I am not sure I can adapt it to use the drop down list structure.

I could stick with the radio buttons but they are not lining up well. For example :

HTML Code:

http://www.tgurney.co.uk/acatalog/Dashwood_Studio_Nesting_BIrds_Light_Grey_Flying_Birds_NEST1413.html

The reason seems to be the row height for smart responsive is specified in the css for all tables : 1.7em. If I change it to line up the radio button rows it makes all my other tables (such as the section list in the left column) compress. I have tried inserting a <td height="15"> into the radio button permutation list but it does not alter the row height.

Sorry to be asking again but do you possibly know how to force the row height for only this table?

Many thanks

Tony

**Goz** · 22-Jan-2019, 04:33 PM

I would probably rewrite that bit to not use tables.... but, in the mean time, there is some CSS somewhere which says :

.ajs-attr input[type="radio"]

with a declaration of :

margin: 5px 3em 0 0 !important;

Change the 5px to 19px and that will line it up

(Ususal caveats apply.... done on Firefox only; can't guarantee it won't affect anything else; test; test etc)

**MattSMR** · 22-Jan-2019, 04:56 PM

I'd handle it differently and tackle the line height issue,

.ajs-attr

Add declaration of line-height: 1.7em;

again, untested code.

As Goz has hinted at ... a rewrite is most definitely the cleanest way to handle this situation in the long run - there's only so many small patches you can apply!

**tonygg** · 22-Jan-2019, 07:01 PM

Hi Goz and Matt,

Thank you both. I am starting to feel really bad. I realise I was not clear about the problem. I am really sorry.

The good news I think adding declaration of line-height: 1.1em to .ajs-attr and reducing margin: 1px 3em 0 0 !important; on .ajs-attr input[type="radio"] seemed to do the trick.

My issue was that there is a lot of space between the rows in the table. Each row seems to be 1.7 em high and so the combined list of options take up a lot of space.

On my original site the list is compact and has no spacing between the rows in the table :

HTML Code:

 https://www.secretgardenquilting.co.uk/acatalog/Dashwood_Studio_Nesting_BIrds_Light_Grey_Flying_Birds_NEST1413.html

Using Chrome inspector on the old site each row is set auto x auto

Using Chrome inspector on the new site each row was set 128.5 x 46.4 . By making the changes you suggested and changing the values a bit each row is now set to 12.8 height.

Thank you both for looking at the problem and giving me the changes.

Tony

Announcement

Positioning the permutation drop down list

Positioning the permutation drop down list

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment