Jump to content
PupStar

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


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
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.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

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

All pictures/products comes in ONE Column

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@

 

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.

Share this post


Link to post
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.

Share this post


Link to post
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

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
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:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×