This is the website I'm working https://www.joliefi.com as you can see if you maximize your web browser by default and refresh the homepage you will notice on page load it loads 3 column and later on become 4 column when the whole page is finished loading. I don't know exactly what code to edit, if it's .css or .js. I believe some of the experts here can help. Thanks in advance.

  • How you needed the site to be load? – Manikandan May 9 '16 at 7:48
  • Load the product display onpage load 4 items per row. because currently it's 3 items per row, and when it's almost finished loading the whole page it automatically adjust to 4 items per row. so there is a delay. – KiD Cajes May 9 '16 at 8:16
  • all your css are minified. i think you can change this css .products-grid li.item { float: left; padding: 0 0 0; position: relative; border: 1px solid #e5e5e5; margin-bottom: 10px; /* margin-left: 0; */ } – Manikandan May 9 '16 at 8:46
  • Try removing unncessary border or padding, I think that is the issue. or check these rules:- .products-grid li.item { border: 1px solid #e5e5e5; margin-bottom: 10px; margin-left: -5px; } @media only screen and (min-width: 1280px) .container_12 .grid_3 { width: 308px; } Try playing with them – Envision Ecommerce May 9 '16 at 8:48
  • I'll try your suggestions. – KiD Cajes May 9 '16 at 9:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.