Jump to content



Photo
* * * * * 6 votes

Bootstrap 3 in 2.3.4 - Responsive from the Get Go


  • Please log in to reply
2123 replies to this topic

#2121   beerbee

beerbee
  • Members
  • 37 posts
  • Real Name:Christoph
  • Gender:Male
  • Location:Berlin Germany

Posted 20 March 2017 - 21:27

Regarding equal height: Maybe I'm a little bit naive, but shouldn't have the space for images and products names have some predefined heights? You might have pictures of different height an also long product names which need a second line, well I couldn't help myself without doing the ultimate evil - changing core files - ad wrapped around a css class for  both of them.

I wanted for grid view: Equal height space for images, orientated to the bottom in that space, and centred within product holder.

Equal height for product names and centred along with the images..

For the images in product_listing.php wrapped them in:

<div class="center-block">

for which I ended up in my user.css with:

.grid-group-item .center-block {
  display: flex;
  height:310px;
  justify-content: center;
  align-items:flex-end;
  
}

where height could be some value maybe  defined per configuration of  SMALL_IMAGE_HEIGHT?

 

For the products name I added a class to h2 there like:

<h2 class="mumpel group inner list-group-item-heading">

which refers in my user.css to:

.grid-group-item .mumpel  {text-align:center;
display:block;height:45px;
}

Well it works at least with edge chrome and FF, I have no apples lying around here. But i confess I don't even know if I'm within the concept of responsive with that, so please kindly forgive me if that was worthless reading.

 

Best regards

Christoph



#2122   BrockleyJohn

BrockleyJohn
  • Community Sponsor
  • 470 posts
  • Real Name:John Ferguson
  • Gender:Male
  • Location:sarf Landin

Posted 20 March 2017 - 21:29

oh poo - chrome 56 on Win7 - under 768px widths go to min like that instead of 100%

at least  I can try and work out why now


BS Edge for PHP7 - here on github: https://github.com/B...i/PHP-7-changes

Bootstrap addons - one per branch on github: https://github.com/B...iew-of-Branches

 

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later integration at 2.3.x


#2123   burt

burt

    I drink and I know things

  • Community Team
  • 12,463 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 20 March 2017 - 22:28

@BrockleyJohn - might you be going down a rabbit-hole here?

 

Is the issue important enough to worry about, taking into account that the whole of Bootstrap will soon be changing to a flex based layout ?  At that point, Safari users will have to put up with broken sites here there and everywhere.

 

I am 100% happy with what we have (the flex css), it is so compact yet solves every problem thrown at it by browsers that are up to spec.


This is a signature that appears on all my posts.  It is not specifically aimed at you.

 

IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
If you are still on the old style osCommerce, it is time to move to Responsive.

 


#2124   BrockleyJohn

BrockleyJohn
  • Community Sponsor
  • 470 posts
  • Real Name:John Ferguson
  • Gender:Male
  • Location:sarf Landin

Posted 20 March 2017 - 22:39

@BrockleyJohn - might you be going down a rabbit-hole here?

 

Is the issue important enough to worry about, taking into account that the whole of Bootstrap will soon be changing to a flex based layout ?  At that point, Safari users will have to put up with broken sites here there and everywhere.

 

I am 100% happy with what we have (the flex css), it is so compact yet solves every problem thrown at it by browsers that are up to spec.

 

@burt you may well be right. I think some of my testing has been against cached styles despite attempting to reload them. I have identified the missing rule and changed the site path to avoid any further caching issues so there's a testable copy here now

http://bromleybr.co.uk/bsnit/

 

However, you might think the styles are getting bloated...


BS Edge for PHP7 - here on github: https://github.com/B...i/PHP-7-changes

Bootstrap addons - one per branch on github: https://github.com/B...iew-of-Branches

 

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later integration at 2.3.x