I want to print the div with border, the border works fine in html page but in print preview the border not displaying.
even i have added inline css for <div class="sfborder"> this was not resulting the correct output, how can i solve this?
<style>
.sfborder {
border: 1px solid black !important;
border-collapse: collapse !important;
border-radius: 2px !important;
margin-bottom: 10px;
overflow: hidden;
}
#media print {
.sfborder {
border: 1px solid !important;
border-collapse: collapse !important;
border-radius: 2px !important;
margin-bottom: 10px;
overflow: hidden;
}
}
</style>
<div class="row">
<div class="col-sm-12">
<div class="sfborder">
<div class="col-sm-4">
<h6 class="text-info">Quote to</h6>
<h6>Kadamba India Technologies PVT LTD</h6>
<p>'Kasturba Nagar, Mysore Road, Bangalore - 560026</p>
</div>
<div class="col-sm-4">
<h6 class="text-info">Ship To</h6>
<h6>Kadama India Technologies PVT LTD</h6>
<p>'Kasturba Nagar, Mysore Road, Bangalore - 560026</p>
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<h6 class="text-info">Delivery Terms</h6>
<p>Advance</p>
</div>
<div class="col-sm-12">
<h6 class="text-info">Payment Terms</h6>
<p>Against Delivery</p>
</div>
<div class="col-sm-12">
<h6 class="text-info">Other Reference</h6>
<p>Shipping charges extra</p>
</div>
</div>
</div>
</div>
</div>
Can i just ask why you are using #media print for your css, i would personally just have it in the same file, or just have the css file without the #media print {
}
<style>
.sfborder {
border: 1px solid !important;
border-collapse: collapse !important;
border-radius: 2px !important;
margin-bottom: 10px;
overflow: hidden;
}
</style>
have you tried just leaving it as above and removing the #media print?
and also did you import the css file correctly?
Related
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
I've set up a system of side by side scrolling divs (code below). However, whenever there is a different amount of content in them, they appear on different levels (as seen in the below picture). I'm not quite sure what's going on and I have a feeling it has something to do with the CSS display attribute. Code is included. This project is using Bootstrap. The brackets in my code are from my CMS. It's automatically embedding content.
Here's a representative JSFiddle: https://jsfiddle.net/d8jopwnr/
My HTML code:
<div class="row">
<div class="col-lg-10 col-lg-offset">
{exp:channel:entries channel="Constructs" limit="1"}
<h1>{title} <span class="header-box">{abbreviation}</span></h1>
<br>
<br>
<div class="container level-box">
<div class="row">
{if summary!=""}
<div class="level col-md-4">
<h4>Summary</h4>
{summary}
Download ToAM° Construct Map
</div>
{/if} {if level_1!=""}
<div class="level col-md-4 col-md-offset-1 shift-margin-level">
<h4>{title} Level 1: {level_1_title}</h4>
{level_1}
Download ToAM° Construct Map
</div>
{/if} {if level_2!=""}
<div class="level col-md-4 col-md-offset-1 shift-margin-level">
<h4>{title} Level 2: {level_2_title}</h4>
{level_2}
Download ToAM° Construct Map
</div>
{/if}
<div class="level col-md-4 col-md-offset-1 shift-margin-level">
<h4>{title} Level 3: {level_3_title}</h4>
{if level_3!=""}{level_3}{/if}
Download ToAM° Construct Map
</div>
{if level_4!=""}
<div class="level col-md-4 col-md-offset-1 shift-margin-level">
<h4>{title} Level 4: {level_4_title}</h4>
{level_4}
Download ToAM° Construct Map
</div>
{/if} {if level_5!=""}
<div class="level col-md-4 col-md-offset-1 shift-margin-level">
<h4>{title} Level 5: {level_5_title}</h4>
{level_5}
Download ToAM° Construct Map
</div>
{/if} {/exp:channel:entries}
</div>
</div>
</div>
</div>
</div>
My Sass code (in my opinion, it's easier to understand than regular CSS. If you disagree, you can translate it to CSS here):
$header-box-vertical-padding: 3px;
$header-box-horizontal-padding: 6px;
$box-height: 60%;
.header-box {
background-color: #0000FF;
color: white;
padding-top: $header-box-vertical-padding;
padding-bottom: $header-box-vertical-padding;
padding-right: $header-box-horizontal-padding;
padding-left: $header-box-horizontal-padding;
border-radius: 6px;
}
.level-box > .row {
overflow-x: auto;
white-space: nowrap;
}
.level-box > .row > .col-md-4 {
display: inline-block;
float: none;
}
.level{
height: 60%;
border-radius: 16px;
width: 200px;
overflow-x: initial;
white-space: normal;
background-color: #0000FF;
color: white;
display: inline-block;
}
.shift-margin-level{ // used to adjust the spacing between levels on constucts
margin-left: 5% !important;
}
.map-display{
width:100%;
border: lightblue solid 1px;
border-radius: 4px;
padding: 8px;
margin-top: 10px;
}
.size{
font-size: 36px;
}
.vertical-center{
display:inline-block;
vertical-align:middle;
}
// scrollbar stuff
.level-box::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.level-box::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
.level-box::-webkit-scrollbar-thumb
{
background-color: #000000;
}
If you add a small line of code to the .col-md-4 to set the vertical-align: top then the first box will align to the top of the container with the rest.
.level-box > .row > .col-md-4 {
vertical-align: top;
display: inline-block;
float: none; }
Hez guys, I have some elements on page, which I've wrapped with border. The elements are close to each other so of course, on the place, where they touch each other, I've got double border.
Think is, I've made links from these elements, so now, some additional border is applyed and I don't know how to remove it.
Code below usefully removed double border when element's we're not links.
Can you please help me to remove this border which comes from link ?
Thank you}
HTML
<section class="popular-items clearfix">
<a href="detail.html">
<div class="item">
<img src="img/pink.png" alt="pink"><br>
<span>2015</span>
<h4 class="pink">pink</h4>
<p class="out-of-stock">Abc</p>
</div>
</a>
<a href="detail.html">
<div class="item">
<img src="img/white.png" alt="white"><br>
<h4 class="green">white</h4>
<p>5 €</p>
</div>
</a>
<a href="detail.html">
<div class="item">
<img src="img/pink.png" alt="pink"><br>
<h4 class="pink">Pink</h4>
<p class="coming-soon">Pink</p>
</div>
</a>
<a href="detail.html">
<div class="item">
<img src="img/red.png" alt="red"><br>
<h4 class="red">Red</h4>
<p>5 €</p>
</div>
</a>
</section>
SCSS
.popular-items {
width: 100%;
.item {
float: left;
width: 25%;
border: 1px solid #dddddd;
padding: 1%;
border-right-width: 0;
height: 420px;
&:last-child {
border-right-width: 1px;
}
&:hover + & {
border-left-width: 0;
}
&:hover {
border: 1px $dark solid;
}
}
}
Well i think you can fix that by setting the border of the links to 0px.
border : none;
On desktop, my button looks great. When I go to mobile version, the button goes outside of the screen width like below:
1) How do I keep this from happened based on my bootply and code below
2) How do I add a top margin to the button too.
Here's my bootply:
http://www.bootply.com/KChuJgr967
Here's my html:
.content-section-d {
padding: 50px 0 0 0;
}
.centered-text {
text-align: center
}
/* Buttons */
.btn,
.btn:link,
.btn:visited {
font-family: 'Lato', sans-serif;
font-weight: 700;
padding: 15px 40px;
background-color: #db4632;
font-size: 20px;
letter-spacing: 0;
text-transform: uppercase;
border-color: #db4632;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.btn:active,
.btn:hover {
background-color: #db4632;
}
<div class="content-section-d">
<div class="container">
<div class="row centered-text">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
</div>
</div>
<div class="row centered-text">
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
</div>
</div>
<div class="col-lg-12 text-center">
Register for a Free Account
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-d -->
So, as I noted in comments you need to use #media.
Here, a code for your button, which your should add to stylesheets.
#media(max-width: 1200px) {
.btn span {
display: block;
max-width: 200px;
white-space: normal;
}
}
Also, don't forget about add <span> to your button. Now button code is:
<button href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></button>
And here is full working example on JSFiddle.
P.S. Change max-width in #media to your property.
You can use vw and vh CSS rules to change the size of text according to the screen size. In your case if you add this:
font-size:3vw;
font-size:1.8vh;
It works pretty well. (Play with values to get exactly what you need)
visit link1 , Its fine. But visit link2 Some problems are there
1)in 2nd link, there is huge gap b/w Rs 25 & "Selling Price + Rs 10 Delivery", Add to cart & buy now button.
2)Also only text "off" is visible, "50" went inside the "check delivery availability" box. 50 & off should visible
we are using this code :
.wk_mp_design .sell_price { display: none;}
.wk_mp_design .label.yousave_label {display: none;}
.wk_mp_design .old-price .price {color: #a0a0a0;font-size: 12px;font-weight: bold;}
.wk_mp_design .you_save_price {color: green;font-size: 11px;font-weight: bold;}
.wk_mp_design .you_save_price::after {content: "OFF";}
.wk_mp_design .special-price .price {color: #000;font-size: 13px;font-weight: bold;}
.wk_mp_design .regular-price .price {color: #000;font-size: 13px;font-weight: bold;}
.wk_mp_design .special-price {border-top: 1px dotted #ccc;clear: both;}
.wk_mp_design .You_savee {float: right;position: relative;top: -49px;}
.wk_mp_design .You_savee .special-price.yousave {border: medium none;}
.wk_mp_design .desc.std {border-top: 1px dotted #ccc;}
.wk_mp_design .mrp {display: none;}
1> height is the issue; use this
.product-view .product-essential .product-shop .price-box {
padding-bottom: 0 !important;
height: 75px;
}
2> top value is the issue; use this
.Quick .You_savee {
border: 1px solid #ccc;
border-radius: 37px;
color: green;
left: 151px;
padding: 0;
position: relative !important;
top: -70px !important;
width: 49px;
}
if above classes are used in multiple places just override these classes
1) Caused because of
<p class="special-price">
p elements 's margin-top
.Quick .special-price {
margin-bottom: 0px !important;
margin-top: 20px !important;
}
also notice the height in
.product-shop .price-box {
padding-bottom: 0px !important;
height: 100px;
}
aswell.
2) I don't really understand what you mean.
This is the relevant markup for the first site:
<div class="Quick_1">
<div class="product-data">
<div class="widget widget-static-block"></div>
<div class="price-box">
<p class="old-price">…</p>
<p class="special-price">…</p>
<p class="sell_price">…</p>
<p></p>
<div class="You_savee">…</div>
</div>
<div class="widget widget-static-block"></div>
</div>
<div class="add-to-box">…</div>
</div>
And this is the same part on the second site:
<div class="Quick_1">
<div class="product-data">
<div class="widget widget-static-block"></div>
<div class="price-box">
<p class="old-price">…</p>
<p class="special-price">…</p>
<div class="You_savee">…</div>
</div>
<div class="widget widget-static-block"></div>
</div>
<p class="sell_price">…</p>
<div class="add-to-box">…</div>
</div>
If you look closely, the sell_price element is outside of the product-data element in the second link which causes this problem. If you move it inside, above the You_savee within the price-box, then it will render as desired.