I have to display a list of products and on hover show some additional information. But on hover, it is flickering a lot. I am not able to understand how to remove that. Any help will be appreciated to remove flickering a lot on hover.
.fixed-width-200 {
width: 200px;
}
.img-responsiveExtended {
display: block;
height: 550px;
max-width: 100%;
overflow: hidden;
text-align: center;
vertical-align: central;
padding-top: 20px;
margin: 0 auto;
}
.parentContent {
position: relative;
/*border:outset;
border-width:thin;
margin:0px;*/
}
.contentWithMargin {
padding: 20px;
height: 200px;
position: absolute;
bottom:150px;
z-index: 1;
background-color:antiquewhite;
opacity:0.8;
}
.imageContentStyle {
z-index: 0;
float:left;
}
.columnBorder {
border: outset;
}
.divWithCenterImgStyle {
text-align:center;
}
.dealPriceStyle {
font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 parentContent" id="parentDiv">
<div class="imageContentStyle">
<div>
<div class="row">
<div class="divWithCenterImgStyle">
<center>
<img class=
"img-responsiveExtended img-container" src=
"http://ecx.images-amazon.com/images/I/A15JTuUMDOL._UY679_.jpg">
</center>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div style="text-align:right">
<strike>
</strike>
<span class=
"dealPriceStyle">
<mark>
<label>$
</label>58.00
</mark>
</span>
</div>
</div>
</div>
</div>
<div>
<h5>Calvin Klein Women's Two-Color Fringe Scarf
<small>
<a href=
"/DreamsNDeals/Home/DealsByVendor?vendorId=1">Amazon
</a>
</small>
</h5>
</div>
</div>
<div class="contentWithMargin collapse" id="38">
<div>
<div class="row modal-body">
<h6>
<span class="label label-warning">
<span class=
"glyphicon glyphicon-time">
</span>
</span>
</h6>
<h5>
<small>
</small>
</h5>
<!-- this text is coming as a flickering effect -->
<p class="text-primary">100% Acrylic Imported
Machine Wash 16" wide Color-blocked scarf with
fringe trim Made in China
</p>
<p class="text-info">Free Shipping
</p>
<div class="col-xs-6">
<p>
<a class="btn btn-primary" href=
"http://www.amazon.com/gp/product/B00Z69JVR8/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B00Z69JVR8&linkCode=as2&tag=dreamsndeal02-20&linkId=CAQNU4JFUUNNWPUB"
target="_blank">Get Deal »
</a>
</p>
</div>
<div class="col-xs-6">
<p class="text-primary">
</p>
</div>
</div>
</div>
</div>
</div>
</div>.
</div>
</body>
</html>
You can see the main HTML code and the CSS code as above.
Related
I am trying to get an SVG to go in the bottom right-hand corner of an image in a bootstrap card. I tried a solution similar to this: picture on the bottom right cornor of image but using the CSS for the icon makes my SVG disappear completely. I did not include the SVG tags in my code snippet because it was very long. But the full SVG I am using can be found here: https://communityloaves.org/wp-content/uploads/2022/03/breadherobadge.svg
Using the included code the cards look like this:
I would like them instead to have the SVG in the bottom right corner of the all green image. like in the second picture.
.image{
height:100%;
position:relative;
background-color:green;
background-size: cover;
background-image: url(https://communityloaves.org/wp-content/uploads/2021/05/Avatar-2-450x450.jpg);
}
.image .icon {
position:absolute;
bottom:0px;
right:0px;
}
p.dash-intro.nav-btns {
padding-top: 3rem;
}
.col-md-4.padding-1 {
padding-left: 5px;
padding-right: 5px;
}
.ann-text {
margin-bottom: 0px !important;
}
.ann-img {
max-height: 40rem;
}
.dash-intro {
color: black;
font-size: 18px;
margin-top: 35px;
}
.member-img {
max-height: 7rem;
margin-bottom: 6px;
padding-left: 15px;
}
p.card-text {
font-size: 11px;
padding: 9px 15px 9px 0px;
}
.special {
color: black;
font-size: 19px;
font-weight: bold;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #D4E1D4;
border-bottom: 1px solid rgba(0,0,0,0.125);
}
.hide {
display: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<br>
<hr>
<div class="row mt-3">
<div class="col-md-12">
<h4 class="font-weight-bold mb-3" id="members">Hub Members</h4>
</div>
</div>
<div class="row">
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image">
<div class="icon"><svg goes here. I didnt inlcude the full svg because it was too long> </div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br></span>
<span class="font-weight-bold">Member Since: </span> Apr 13, 2022 <br>
<span class="font-weight-bold">First Donation: </span> Feb 27, 2022 <br>
<span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span> janedoe#gmail.com</span>
<br><span class="font-weight-bold"><i class="fa fa-phone"></i></span> 555 555 555 (cell) <br><span class="font-weight-bold">Loaves to date: </span> 5
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image" stlye="background-image: url();">
<div class="icon">><svg goes here. I didnt inlcude the full svg because it was too long></div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br></span>
<span class="font-weight-bold">Member Since: </span> Apr 13, 2022 <br>
<span class="font-weight-bold">First Donation: </span> Feb 27, 2022 <br>
<span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span> janedoe#gmail.com</span>
<br><span class="font-weight-bold"><i class="fa fa-phone"></i></span> 555 555 555 (cell) <br><span class="font-weight-bold">Loaves to date: </span> 5
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image" stlye="background-image: url();">
<div class="icon">><svg goes here. I didnt inlcude the full svg because it was too long></div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br></span>
<span class="font-weight-bold">Member Since: </span> Apr 13, 2022 <br>
<span class="font-weight-bold">First Donation: </span> Feb 27, 2022 <br>
<span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span> janedoe#gmail.com</span>
<br><span class="font-weight-bold"><i class="fa fa-phone"></i></span> 555 555 555 (cell) <br><span class="font-weight-bold">Loaves to date: </span> 5
</p>
</div>
</div>
</div>
</div>
</div>
</div>
I add an image inside .icon class you can add your svg.
Basically you need to give parent class which is .icon a position:relative and your svg (child) position:absolute than you can play inside with
bottom, left, right and top properties which in this situation need
bottom:0;
right: 0;
Here is your code
*,
*::before,
*::after {
box-sizing: border-box;
}
.image{
height:100%;
position:relative;
background-color:green;
background-size: cover;
}
.image .icon {
position:relative;
width: 100%;
height: 100%;
}
.image .icon img{
position: absolute;
bottom:0;
right: 0;
border-radius: 100%;
width: 80px;
}
p.dash-intro.nav-btns {
padding-top: 3rem;
}
.col-md-4.padding-1 {
padding-left: 5px;
padding-right: 5px;
}
.ann-text {
margin-bottom: 0px !important;
}
.ann-img {
max-height: 40rem;
}
.dash-intro {
color: black;
font-size: 18px;
margin-top: 35px;
}
.member-img {
max-height: 7rem;
margin-bottom: 6px;
padding-left: 15px;
}
p.card-text {
font-size: 11px;
padding: 9px 15px 9px 0px;
}
.special {
color: black;
font-size: 19px;
font-weight: bold;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #D4E1D4;
border-bottom: 1px solid rgba(0,0,0,0.125);
}
.hide {
display: none;
}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<div class="container-fluid">
<br />
<hr />
<div class="row mt-3">
<div class="col-md-12">
<h4 class="font-weight-bold mb-3" id="members">Hub Members</h4>
</div>
</div>
<div class="row">
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image">
<div class="icon">
<img
src="https://source.unsplash.com/random/100x100"
alt=""
/>
</div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br /></span>
<span class="font-weight-bold">Member Since: </span> Apr 13,
2022 <br />
<span class="font-weight-bold">First Donation: </span> Feb 27,
2022 <br />
<span class="email-text"
><span class="font-weight-bold"
><i class="fa fa-envelope"></i
></span>
janedoe#gmail.com</span
>
<br /><span class="font-weight-bold"
><i class="fa fa-phone"></i
></span>
555 555 555 (cell) <br /><span class="font-weight-bold"
>Loaves to date:
</span>
5
</p>
</div>
</div>
</div>
</div>
</div>
</div>
I made 3 columns with the bootstrap framework. In the second column there is a div with some text. I would like to move that div to the top left corner of the document (not on the top left corner of the parent).
I cannot just add a div above the columns or add jquery or javascript because I am using other software. It is very stricted and I can only add custom CSS to it.
An example. The purple div should be on the space of the left arrow:
I tried position absolute but with no success.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./example.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4"><h3>Title 1 - col-sm-4</h3></div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="section-topleft">
<h3>This div should be on the top left corner of the document</h3>
</div>
<h3>Title 2 - col-sm-4</h3></div>
<div class="col-sm-4" style="background-color:lavender;"><h3>Title 3 - col-sm-4</h3></div>
</div>
</div>
</body>
</html>
.section-topleft{
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
I also do not want position: fixed. I am really curious if this is even possible. If it's not possible it's also fine.
In the real example it does not work yet
Here you can see the css of the div with class "test". The div that should be placed on the top left corner
So here is the code of the HTML from the 3rd row (relevant html):
<div class="row">
<div class="col-md-3 hidden-xs hidden-sm">
<!-- Nav (Logged in) -->
<div class="main-logo">
<a href="https://google.com">
<img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/df60389c3caec18e6d856beca7c8_logo_black.png">
</a>
</div>
<div class="navi-left">
<ul>
<li class="active">
<a href="/affiliate">
<span id="affiliate-nav-homepage"><span class="default">Home Page</span></span>
</a>
</li>
<li>
<a href="/affiliate/content">
<span id="affiliate-nav-marketing-materials"><span class="default">Marketing Materials</span></span>
</a>
</li>
<li>
<a href="/affiliate/analytics">
<span id="affiliate-nav-analytics"><span class="default">Analytics</span></span>
</a>
</li>
<li>
<a href="/affiliate/invite">
<span id="affiliate-nav-invite-others"><span class="default">Invite Others</span></span>
</a>
</li>
<li>
<a href="/affiliate/children">
<span id="affiliate-nav-your-network"><span class="default">Your Network</span></span>
</a>
</li>
<li>
<a href="/affiliate/subids">
<span id="affiliate-nav-sub-ids"><span class="default">SubIDs/Channels</span></span>
</a>
</li>
<li>
<a href="/affiliate/landing_pages">
<span id="affiliate-nav-landing-pages"><span class="default">Landing Pages</span></span>
</a>
</li>
<li>
<a href="/affiliate/commission_details">
<span id="affiliate-nav-commission-details"><span class="default">Commissions</span></span>
</a>
</li>
</ul>
<ul class="navi-mobile-lower">
<li>
<i>
<hr>
</i>
</li>
<li>
Create Password
</li>
<li>
Update Account Email
</li>
<li>
Update Paypal Email
</li>
<li>
Log Out
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="main-content">
<!-- header -->
<div class="custom-header">
<div class="default-title" id="default-title">
<figure><img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/374c2ace96edb5866ba9e7aa079bbc202232c4e8_Brand%20advocates%20banner%20%283%29.png" data-image="foo"></figure>
</div>
</div>
<div>
<div class="v2-alerts">
</div>
<div class="row">
<div class="col-md-3" style="
position: static;
">
<div class="left-panel">
<div>
<div class="test">
<h1>test</h1>
</div>
<p>We are excited to have you as part of the studio team!</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="right-panel">
<div id="sharing-div">
<div class="sharing-section top-to-bottom">
<div class="row">
<div class="col-md-12">
<div class="title">
<span id="affiliate-link-title"><span class="default">Your Referral Link</span></span>
</div>
<div class="aff-link">
<span><i>
http://studio.com?afmc=1b
</i></span>
</div>
<div class="row">
<div class="col-md-12">
<div>
<div class="pull-right">
<a class="copy-link" data-clipboard-text="http://studio.com?afc=1b">copy link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sharing-section top-to-bottom">
<div class="row">
<div class="col-md-12">
<div class="title">
<span id="primary-social-links-title"><span class="default">your primary social links</span></span>
<div class="pull-right">
view all links
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="links">
<div class="share-btn">
<a data-share-type="email" data-link-id="9937727" href="/share/email">
<div>
<img src="/assets/primary-email-c415b75ea87907f28155ecb8b66b5fc42686c773f6315e8a9151d8b61dbe385c.png">
</div>
Email
</a>
</div>
<div class="share-btn">
<a href="/share/facebook" target="_blank" data-share-type="facebook" data-link-id="9937727">
<div>
<img src="/assets/primary-facebook-70e1f3176145c920e2423ffe0c06a15eece6e56cd51172582ea4d5571e0b0ab3.png">
</div>
Facebook
</a>
</div>
<div class="share-btn">
<a data-share-type="twitter" data-link-id="9937727" target="_blank" href="/share/tweet">
<div>
<img src="/assets/primary-twitter-2130572d07fd2cd1604a59dd16498c4e267ddf5c8ed1a82fcc826f7c6511dee0.png">
</div>
Twitter
</a>
</div>
<div id="whatsapp_share" class="share-btn">
<a data-share-type="whatsapp" data-link-id="9937727" target="_blank" href="/share/whatsapp">
<div>
<img src="/assets/primary-whatsapp-283a25d6a61b76686118d7f2f5866a0ba21c520ff4404a3b248523b7b7d396bd.png">
</div>
Whatsapp
</a>
</div>
<div id="text_share" class="share-btn">
<a data-share-type="text" data-link-id="9937727" target="_blank" href="/share/text">
<div>
<img src="/assets/primary-sms-2ee17bddcfbb89a98c68fdcf8282df2e5920c135ebe62595e77dc0cfc6a0622c.png">
</div>
Text
</a>
</div>
<div id="linked_in_share" class="share-btn">
<a data-share-type="linkedin" data-link-id="9937727" target="_blank" href="/share/linkedin">
<div>
<img src="/assets/primary-linkedin-5bc3ba7bbfda5051d5d0d82ebc9b397ac17778b21fa7936ba7b0db3bbbc22d92.png">
</div>
LinkedIn
</a>
</div>
<div class="share-btn">
<a ic-action="slideToggle" ic-target="#instagram-sharing-instructions" data-share-type="instagram" data-link-id="9937727" ic-trigger-on="default">
<div>
<img src="/assets/primary-instagram-826dae8b5dbccbce3a5a2e4ed0936c96fb6a24e3eb32006f3e5ebf4c51e9dc32.png">
</div>
Instagram
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="instagram-sharing-instructions" style="display: none;">
<div class="col-md-12">
<div class="fs18">
<span id="affiliate-instagram-sharing-instructions"><span class="default">Instagram Sharing Instructions</span></span>
</div>
</div>
<div class="col-md-12">
<ol>
<li>
<span class="instagram-badge">1</span>
<a class="copy-link" data-clipboard-text="http://studio.com?afmc=1b">copy link</a>
</li>
<li>
<span class="instagram-badge">2</span>
<a id="instagram-launch" class="" href="https://instagram.com/_n/mainfeed/" target="_blank"><span></span><b>Click here to launch Instagram</b></a>
<script>
$(function(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$("#instagram-launch").attr('href', "instagram://");
} else if(navigator.userAgent.match(/android/i)) {
$("#instagram-launch").attr('href', "intent://instagram.com/_n/mainfeed/#Intent;package=com.instagram.android;scheme=https;end")
} else {
$("#instagram-launch").attr('href', "https://instagram.com/_n/mainfeed/");
$("#instagram-launch").attr('target', "_blank")
}
})
</script>
</li>
<li><span class="instagram-badge">3</span>Paste the link into your Profile, Story or Reels</li>
</ol>
</div>
</div>
</div>
<!--<div class="divider"></div>-->
<div>
<div class="title">
<span id="your-progress-title"><span class="default">Your Progress</span></span>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>2</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-visitors-title"><span class="default">Friends have visited us</span></span>
</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>0</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-sign-up-title"><span class="default">Friends have signed up with us</span></span>
</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>0</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-purchase-title"><span class="default">Purchases made by friends</span></span>
</span>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="title">
<span id="affiliate-payments-title"><span class="default">Your Payments</span></span>
</div>
<div class="dash-instructions">
<p>You will receive a 30% commission for each referral. For monthly and annual subscriptions, you will receive recurring commissions as long as the member is subscribed. </p>
</div>
<div class="table-scrollable-wrapper">
<table class="table">
<thead>
<tr>
<th>
<span id="affiliate-payments-compensation"><span class="default">Compensation</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-due"><span class="default">Due</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-upcoming"><span class="default">Upcoming</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-paid"><span class="default">Paid</span></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="text-muted text-center">
<span style="opacity: 0.5;"> nothing to show yet </span>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the css(most of the important css is from bootstrap itself):
body {
background: #ffffff url(https://forge.swap-studio.com/assets/bg-polygon-dd7097463c1102fbf7fe55f6e00595256861740bba73750be91902f955f41f1e.png) no-repeat bottom center; /* fallback for old browsers */
background-size: cover;
background-attachment: fixed;
}
.grad-text {
background: -webkit-linear-gradient(0deg, #555555 0, #555555 70%);
}
a{
color: #002929;
}
/*.aff-link {*/
/*border: 1px solid #002929;*/
/*}*/
/*.aff-link-2 {*/
/*border: 1px solid #cdcdcd;*/
/*}*/
.aff-link-2 .copy-link {
background-color: #cdcdcd;
border: 1px solid #cdcdcd;
}
.aff-link-2 .btn-alt {
color: #cdcdcd !important;
}
.copy-link {
background-color: #002929;
border: 1px solid #002929;
}
.copy-link-wide {
background-color: #002929;
border: 1px solid #002929;
}
.aff-progress b {
color: #002929;
}
.change-url {
color: #002929;
}
.change-url-field .btn {
background-color: #002929;
}
.change-url-field .btn-alt {
/*background-color: #002929;*/
}
.aff-invite input {
border: 1px solid #002929;
}
.dot {
border: (10 / 5) solid #002929;
}
#affiliate-invite-who {
color: #002929;
font-size: 1.2em;
}
.dash-primary-color {
color: #002929 !important;
}
.button-primary {
background-color: #002929;
border: 1px solid #002929;
}
.email-input {
border: 1px solid #002929;
}
.button-primary-fullwidth {
background-color: #002929;
border: 1px solid #002929;
/*border-bottom: 3px solid #cdcdcd >;*/
}
.button-primary-flat-fullwidth {
color: #002929;
border: 1px solid #002929;
}
.comp-stats-figure {
color: #002929;
}
.top-to-bottom {
/*border-width: 6px;*/
/*border-style: solid;*/
/*border-color: #002929;*/
/*-webkit-border-image:*/
/*-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff)) 1 100%;*/
/*-webkit-border-image:*/
/*-webkit-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*-moz-border-image:*/
/*-moz-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*-o-border-image:*/
/*-o-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*border-image:*/
/*linear-gradient(to bottom, #ffffff, #ffffff) 1 100%;*/
/*border-right: 0px;*/
/*border-top: 0px;*/
/*border-bottom: 0px;*/
}
/* Logged in page */
.test{
position: absolute;
background-color:purple;
top: 0;
left: 0;
width:100%;
}
It depends a bit on exactly what you want for other items, but concentrating on the purple-background element it is currently placed relative to the second child of the row element as that is given position: relative by the bootstrap CSS.
This snippet sets that second child to have position: static so the purple element is not positioned relative to it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./example.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.section-topleft {
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
.container-fluid .row :nth-child(2) {
position: static;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4">
<h3>Title 1 - col-sm-4</h3>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="section-topleft">
<h3>This div should be on the top left corner of the document</h3>
</div>
<h3>Title 2 - col-sm-4</h3>
</div>
<div class="col-sm-4" style="background-color:lavender;">
<h3>Title 3 - col-sm-4</h3>
</div>
</div>
</div>
</body>
</html>
So, I have to create this Page where in you get text alongside image displayed as seen in here
But , on minimising the window size the image gets overlapped as seen here
<div class="header1">
<div class="col-md-8">
<h4 class="hedtext">Name</h4>
</br>
<h4 class="hedtext">Address</h4>
</br>
<h4 class="hedtext">Contact Number</h4>
</br>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="pull-right img1">
</div>
</div>
and Here is the css
.hedtext {
padding-top:10px;
margin-bottom: -19px;
line-height: 2pt;
font-size: 13px;
font-weight: 750;
float: left;
}
.header1 {
border: 1px solid black;
height: 150px;
}
.img1 {
width: auto;
height: 130px;
padding :10px;
}
Also, using bootstrap 3 . All i want is that the image goes side by side the text on minimising the window size .
First you have forgot to add the .row class div which bootstrap requires to wrap around the columns to work correctly.
I removed .pull-right and instead just added text-right to the column. You can also use floats though or whatever to set the image to the right side however you wish.
<div class="header1 row">
<div class="col-md-8">
<h4 class="hedtext">Name</h4>
</br>
<h4 class="hedtext">Address</h4>
</br>
<h4 class="hedtext">Contact Number</h4>
</br>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4 text-right">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
class="img1">
</div>
</div>
You have to wrap col in row
Remove the .hedtext - float (bootstrap worry about float)
Remove .header1 height: 130px; (It the reason image out of border)
See working code
.hedtext {
line-height: 2pt;
font-size: 13px;
font-weight: 750;
}
.row {
border: 1px solid black;
}
.img1 {
width: auto;
height: 130px;
padding: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8">
<h4 class="hedtext">Name</h4>
<h4 class="hedtext">Address</h4>
<h4 class="hedtext">Contact Number</h4>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img1">
</div>
</div>
</div>
you have to add responsive class in div like col-xs-* for responsive
do this for your solution
<div clss="row">
<div class="header1">
<div class="col-md-8 col-xs-8">
<h4 class="hedtext">Name</h4>
</br>
<h4 class="hedtext">Address</h4>
</br>
<h4 class="hedtext">Contact Number</h4>
</br>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4 col-xs-4">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
class="pull-right img1">
</div>
</div>
</div>
I have a pretty weird situation here.
I have this HTML:
<!DOCTYPE html>
<html>
<head>
<title>Notes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
test1
</p>
<a href="/notes/pin/1" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>testtt</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/4" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>- test</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
</div>
<div style="padding-top:50px;"></div>
<!--- NON-PINNED -->
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/2" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Testi</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Dhchjc
</p>
<a href="/notes/pin/3" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Djfjgn<br>- eat 🌮</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Fhfj
</p>
<a href="/notes/pin/5" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Brjdjc</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
</div>
<a href="/notes/new/">
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create">
<p class="plus">+</p>
</div>
</a>
</body>
</html>
And my CSS:
#floating-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #db4437;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
.column {
margin-top: 10px;
}
.card {
margin-left: 10px;
margin-right: 10px;
max-height: 500px;
}
When viewing on regular desktop mode, everything is fine.
When on Chrome + mobile viewport, there is a slight overflow on the x axis.
When viewing on Firefox + mobile viewport, it is fine.
When removing the script tag importing Font-Awesome, there are no longer any problems on Chrome. The font-awesome CSS CDN also causes this.
There are two columns because one is for pinned notes (displayed first) and the other for regular ones.
The problem
When on Chrome with mobile viewport, the page width is larger than the viewport, but not with Firefox. I fixed it by remove the script tag importing Font-Awesome, but I would need font awesome and it's icons.
I've fixed this by adding .columns { margin-right:0px;margin-left:0px;} to the CSS. See this bulma issue.
at the moment I have two content boxes which are placed on seperate lines and they are not connected. If possible, I would like to bring these two boxes to be the same on the same line as one another and then add padding to the sides of these boxes. An example has been shown in the image below of what I have currently and what I would like to have.
My code is as follows:
HTML -
<h1 id="LogInHeader">LOGIN</h1>
<div class="form-group">
<input type="text" id="txtGRC" placeholder="Email Address">
<input type="text" id="txtGRC" placeholder="Password">
</div>
<button type="submit" id="GenerateReportButton" class="btn btn-default">SECURE LOGIN</button>
<p id="LogInForgottenPassword" style="color:white">Forgotten Password</p>
</form>
</content>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Microscope.png" />
<h2 id="CarouselHeader">REAL-TIME REPORTING ON YOUR RECOVERY AUDIT</h2>
<p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Headache%20pill.png" />
<h2 id="CarouselHeader">FAST, QUICK ACTION</h2>
<p id="CarouselText">Sick of losing proft? Auditing given you a headache? Let us take care of that for you </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Trolleys.png" />
<h2 id="CarouselHeader">PRIVATE, PUBLIC, WE DO IT ALL</h2>
<p id="CarouselText">Worried that we don't cover your business? We cover a wide ranges from private to public </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls --> <a href="#carousel-example" data-slide="prev">
</a>
<a href="#carousel-example" data-slide="next">
</a>
</div>
CSS -
.carousel-content {
color:black;
display:flex;
align-items:center;
text-align: center;
}
#carousel-example{
width: 500px;
height: 200px;
}
#CarouselHeader{
font-weight: bold;
font-size: 18px;
}
#CarouselText{
font-size: 11px;
color: #6d6e70;
}
#CarouselLink{
font-size: 12px;
text-decoration: underline;
}
#CarouselLink a:link{
color: #4f7f64;
}
#LogInForgottenPassword{
color: white;
font-size: 11px;
text-decoration: underline;
padding-bottom: 25px;
}
#LogInHeader{
color: white;
font-weight: bold;
font-size: 22px;
padding-top: 40px;
}
#LogInMain {
border-color: red;
border-radius: 25px;
color: white;
}
Use display and give it the setting inline-block:
http://www.w3schools.com/cssref/pr_class_display.asp
It is also possible with the float property:
http://www.w3schools.com/cssref/pr_class_float.asp
As you are already using the display: flex option in your code, let's take that and use it.
.container {
display: flex;
}
.item {
height: 100px;
border: 1px solid #333;
flex: 1;
flex-direction: row;
/* flex-direction: row is the initial value */
}
<div class="container">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
</div>
Use following
.inl{ border-width:thick;
border-style:dashed;
border-color:Black;
display:inline-block;
width:100px;
}
<div class="inl">abc
</div>
<div class="inl">abc
</div>
}
.carousel-inner { display: flex; justify-content: space-between; }
.carousel-inner .item { width: 25%; }
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Microscope.png" />
<h2 id="CarouselHeader">REAL-TIME<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Microscope.png" />
<h2 id="CarouselHeader">REAL-TIME REPORTING ON YOUR RECOVERY AUDIT</h2>
<p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Headache%20pill.png" />
<h2 id="CarouselHeader">FAST, QUICK ACTION</h2>
<p id="CarouselText">Sick of losing proft? Auditing given you a headache? Let us take care of that for you </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Trolleys.png" />
<h2 id="CarouselHeader">PRIVATE, PUBLIC, WE DO IT ALL</h2>
<p id="CarouselText">Worried that we don't cover your business? We cover a wide ranges from private to public </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
</div>
</div>
</div> REPORTING ON YOUR RECOVERY AUDIT</h2>
<p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>