Regulate product listing container width

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #350049

-- url of the page with the problem -- : www.javelincommunications.com/build-you-dream-stanchion

For some years now we've been making websites (increasingly with WordPress) that fill the screen out to a max width of 1500 or 1600px with side padding. How do I achieve that with Hikashop? My product listings seem to have a set limit of about 960px They are being constrained by some unwanted, no longer necessary bootstrap css code. I find them in the inspector. As a result the whole presentation looks dinky. Right now we want to forego the hassle of installing a whole new template or framework. Is there a simple custom css override solution which exempts Hikashop and allows us to regulate width independent of Bootstrap and template.css?
Thanks as always,
-Jim Gribble

Please Log in or Create an account to join the conversation.

  • Posts: 81513
  • Thank you received: 13068
  • MODERATOR
1 year 1 month ago #350061

Hi,

HikaShop uses the full width available in the area where it displays it things.

It's your template which is configured to use a limited width for the main area of the page with the CSS in the file www.javelincommunications.com/templates/...t3/css/bootstrap.css
So you need to check with the support of your template provider what they recommend to make that change. It will apply not only to HikaShop, but to any extension which displays things in the main area of the page on your frontend, included Joomla pages.

Here, you can see I deactivated the CSS (coming from that templates/ja_university_t3/css/bootstrap.css file ) for the container class of the main div of your template, and it displays the main area with the full width available:
i.imgur.com/3FOjniu.png

Please Log in or Create an account to join the conversation.

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #350076

Thank you for replying! I had hoped there was a way to regulate this just for Hikashop pages. But, if I have to, is not a problem for me to do a cusom.css override. Have experimented and it will work, sitewide.
-Jim Gribbler

Please Log in or Create an account to join the conversation.

  • Posts: 81513
  • Thank you received: 13068
  • MODERATOR
1 year 1 month ago #350080

Hi,

In the main "html" tag of your pages, your template adds the folder name of the current component as a class.
So you can prefix your custom CSS with this to add your custom CSS only to HikaShop pages.
For example:

.com_hikashop .container {
    width: 100% !important;
}
Note that this is something specific to your template. HikaShop is not involved in this. You should normally contact your template provider's support for this and other templates might not allow you to do this or might require another methode to do it.

Please Log in or Create an account to join the conversation.

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #350092

Thank you.
I think I can fix the issue in bootstrap.css or template.css or custom.css. It is not a best practice but it works for now and we don't care so much because this old template is obsolete and will be soon junked anyway.

@media (min-width: 1200px) {
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 40px;
padding-right: 40px;
}
}
@media (min-width: 1200px) {
.container {
width: auto;
max-width: 1600px;
}
}
@media (min-width: 1200px) {
.t3-mainnav {
padding-right: 60px;
}
}

Please Log in or Create an account to join the conversation.

Time to create page: 0.060 seconds
Powered by Kunena Forum