Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Adding a left border to body content in responsive version


Recommended Posts

Hi Guys,

 

I am not sure if I am going about this the correct way or the easiest way possible.

 

I have added a left border to the body content but can not get the padding and or margin to work with out the entire content (inc border) moving together

 

Also the border only is as tall as the content page and I want it to fill the entire page length.

 

This is what I have done so far

 

template_top

      <div id="bodyContent" class="col-md-<?php echo $oscTemplate->getGridContentWidth(); ?> <?php echo ($oscTemplate->hasBlocks('boxes_column_left') ? 'col-md-push-' . $oscTemplate->getGridColumnWidth() : ''); ?>">

      <div class="left-border">

template_bottom

      </div> <!-- bodyContent //-->
</div>

user.css

.left-border {
border-left: 1px solid #dedede;
}

Mark

Link to comment
Share on other sites

To simplify things can you just not add css to the user.css file to add a border where you need it. No need to alter core code files then. Thats what that file is for.

 

@@14steve14

 

I tried that steve but could not get it to work, maybe I was doing something wrong

 

ok forget that, tried it again and it worked lol

 

so how would I get it to overflow to the full length of the page

Link to comment
Share on other sites

can anyone shed any light on how to always make the left column fill the entire length of the page dynamically depending on the body content???

 

I have found partial solution

#columnLeft {border: 1px solid #dedede; margin-bottom: -9999px; padding-bottom: 9999px;}

but its not ideal as then the page just scrolls forever

 

Thanks

 

Mark

Link to comment
Share on other sites

thanks to Malcolm @Artcolnc for this

@[member=media] (min-width: 992px) {
  #bodyWrapper {
    overflow-y: hidden;
  }
}

#columnLeft {border: 1px solid #dedede; padding-bottom: 9999px; margin-bottom: -9999px;}

Link to comment
Share on other sites

I should point out that I, too, am working on a site that has a left column that I wanted to extend all the way to the bottom of the screen. But, the left column is only used in the Medium and Large bootstrap modes. Hence, the above CSS has the @@media clause.

 

Malcolm

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...