Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

2334bs3 - Change width of container but still be fluid


Recommended Posts

@@burt

 

I am playing with designing a template in bootstrap and I am trying to reduce the size of the body container to lets say 960px wide but when I do this it also breaks the responsive layout.

 

I have googled and its a bit baffling with various different answers, as you are an expert of/in BS I thought you would be the very man to speak to for guidance

 

Thanks

 

Mark

Link to comment
Share on other sites

@@PupStar

 

1.  set body to 960 width and margin auto.

2.  set a media breakpoint of 960 and in this breakpoint set body 100%

body {
  width: 960px;
  margin: 0 auto;
}

@[member=media] (max-width: 960px) {
  body {
    width: 100%;
  }
}

L2: simple to understand

L3: likely means nothing to most readers, it simply centers the whole site

L6: when the viewport is <= 960, (L7 - L8) body is set 100%, no need to center a 100% wide body.

 

Look up breakpoints and get used to using them.

Link to comment
Share on other sites

  • 1 year later...

Hi,

 

 

somebody could help me where I can managed the height of the caption box?

That's the box where te price and buttons are showed.

 

I dont need to show price and buttons, took these out but still have lot of loosed space.

 

see sreenpicture

 

 

thank for help

 

 

post-165220-0-95458200-1457051041_thumb.jpg

Link to comment
Share on other sites

Hi guys,

 

 

found it. changed some code in includes/modules/content/front_page/templates/cm_fp_new_products.php

 

      <div class="col-sm-6 col-md-3">
        <div class="thumbnail equal-height">
          <a href="<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']); ?>"><?php echo tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); ?></a>
          <div class="caption">
              <p class="text-center"><a href="<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']); ?>"><?php echo $new_products['products_name']; ?></a></p>
            <hr>
            <p class="text-center"><?php echo $currencies->display_price($new_products[''], tep_get_tax_rate($new_products['products_tax_class_id'])); ?></p>
            <div class="text-center">
              <div class="btn-group">
 
changed to :
<div class="col-sm-6 col-md-3">
        <div class="thumbnail equal-height">
          <a href="<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']); ?>"><?php echo tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); ?></a>
          <div class="">
              <p class="text-center"><a href="<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']); ?>"><?php echo $new_products['products_name']; ?></a></p>
            <p class="text-center"><?php echo $currencies->display_price($new_products[''], tep_get_tax_rate($new_products['products_tax_class_id'])); ?></p>
            <div class="">
              <div class="">
              </div>
            </div>
 
now it looks like see printscreen.
 
maybe it helps somebody.
 
I dont need or want "Prices", "View" and "Buy Now" buttons in this pages and I hate waste of loosed space, because the human eye loose focus, attention when he/she dont see everything in the spectrum(center) and because Image(s) says more then 1000 words.
 

 

post-165220-0-64568300-1457095456_thumb.jpg

Link to comment
Share on other sites

@@PupStar

 

1.  set body to 960 width and margin auto.

2.  set a media breakpoint of 960 and in this breakpoint set body 100%

body {
  width: 960px;
  margin: 0 auto;
}

@[member='media'] (max-width: 960px) {
  body {
    width: 100%;
  }
}

L2: simple to understand

L3: likely means nothing to most readers, it simply centers the whole site

L6: when the viewport is <= 960, (L7 - L8) body is set 100%, no need to center a 100% wide body.

 

Look up breakpoints and get used to using them.

 

I've tried this, and it does make the site 960px but it does not center, it just stays to the left? Does anybody have an idea why that is?

Link to comment
Share on other sites

@@camery,

 

think most easy and best way is to play with admin/configuration/bootstrap setup & the wide of the contents in admin/modules/content.

These settings fix automatically the right settings for smartphones and tablets.

 

No need to change css for best view in all devices

Link to comment
Share on other sites

It is a new installation of Oscommerce bootstrap-3-in-2334-responsive-from-the-get-go.

I have added:

 

WYSIWYG CKE Editor edit pages BOOTSTRAP version

 

Horizontal Categories Menu BS

 

Modular Front Page

 

Theme Switcher

 

That's it. I just now tried replacing the index.php with the original, but no luck, the shop is still to the left. I have not made any changes to the user.css file other than the width code from Burt above.

Link to comment
Share on other sites

You must have noticed when the store lost its formatting and moved to the left assuming that you are not just blindly changing code without checking at every stage. Only you know what you were doing when the change happened.

 

Using your backup copies of files you were altering I would go back through them until you get to the stage where the site is centered. This should be easy if you have backups of the complete file set before starting to alter code to add addons. If you haven't got these, lesson learned and in future keep copies.

 

As you have very few mods added I would just re install the original version and start again and remember to keep backups of all files and database before making any changes.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

When installing the addons, the shop had full width, so no, did not notice any change.

 

You're right, i will go through my backups and check when the centering got off, just thought someone knew where to look.

 

Anyway, thank you very much for your time and help.  :thumbsup:

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...