2334bs3 - Change width of container but still be fluid

[PupStar 57]

@@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

[burt 2,643]

@@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.

[PupStar 57]

@@burt

@@wHiTeHaT

 

Thanks, lots of BS3 reading to do now.

[Melhor 3]

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

 

 

[Melhor 3]

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.

 

 

[♥14steve14 402]

Just out of curiosity why have you left all the empty divs in there.

[Melhor 3]

if you take them away you blow up the look of the shop.

All pictures/products comes in ONE Column

[camery 0]

@@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?

[Melhor 3]

@@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

[camery 0]

@

 

Thanks for replying, but there is no difference playing with the admin/configuration/bootstrap setup. The shop is like glued to the left side of my desktop.

[Melhor 3]

normally its centered. Undo all changes you did or start a CLEAN setup

[camery 0]

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.

[♥14steve14 402]

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.

[camery 0]

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: