This is the css. The problem is when the screen is in 1366x768, div didn't stick with the bottom navbar.
Is there any other ways that can replace the bottom property?
.Newmealpopout {
position: fixed;
left: inherit;
bottom: 56px;
height: 220px;
padding: 6px;
background-color: #9e9e9e;
color: #333;
}
<div class="col-xs-3 col-md-2 col-lg-3 mts-padding-all-15 mts-border-right text-center" style="">
<span style="margin-left:-3px; color: black!important; text-shadow: 0px 0px 0px ;">Meal</span> <a href="javascript:$('#pnlmealNew').slideToggle('fast');" onclick="fntToggleHotelList(event);" class="meal-toggle tourdetail-ttp mts-hypl mts-text-12"
data-toggle="tooltip" title="" data-original-title="View Meals"><i class="fa fa-lg fa-info-circle"></i></a>
<br>
<div class="row">
<div id="pnlmealNew" class="col-xs-3 col-md-2 col-lg-3 Newmealpopout mts-padding-top-10 mts-padding-side-10" style="display: none;">
</div>
</div>
you can refer the screenshot for references
Related
I have a row of cards that are sized so that two fit to the width of the screen then the next two appear below.
I am struggling to get the top of the #card row to be 10px below the #title-row above and to be at the bottom of the #main-container and scrolling if the screen isn't tall enough.
#card-row {
position: relative;
overflow: scroll;
width: 98%;
margin: 0;
bottom: 0;
}
#main-container {
overflow: hidden;
height: 100%;
width: 100%;
}
#title-text {
margin-top: 15px;
margin-bottom: 0px;
font-size: 80px;
color: black;
font-family: "CallingAngelsPersonalUse";
text-shadow: 4px 6px 12px #fff;
}
#date-text {
margin-top: -20px;
margin-bottom: 0px;
font-size: 45px;
color: black;
font-family: "Strawberry_Whipped_Cream";
text-shadow: 2px 4px 6px #fff;
}
#card-title {
font-family: "CallingAngelsPersonalUse";
font-size: 30px;
left: -5px;
bottom: -20px;
}
<div id="main-container" class="container">
<div id="title-row" class="row">
<div class="container center">
<div class="show-on-medium-and-up hide-on-small-only">
<p id="title-text">Scott and Viki</p>
<p id="date-text">23rd June 2018</p>
<a id="button" class="black waves-effect waves-light btn z-depth-3" href="mailto:who#gmail.com?subject=Wedding%20R.S.V.P"><i class="material-icons right">email</i>R.S.V.P</a>
</div>
</div>
</div>
<!-- Agenda Card -->
<div id="card-row" class="row">
<div class="col s12 m6">
<a href="#" onclick="$('#agenda-modal').modal('open');">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg" class="z-depth-4">
<span id="card-title" class="card-title">Order of the day</span>
</div>
</div>
</a>
</div>
<!-- Map Card -->
<div class="col s12 m6">
<a href="#" onclick="$('#map-modal').modal('open');" role="button" (click)="openChurchMap()">
<div class="card">
<div class="card-image">
<img src="./assets/1.jpg" class="z-depth-4">
<span id="card-title" class="card-title">Map's and Directions</span>
</div>
</div>
</a>
</div>
6 more cards as above
</div>
Currently, everything is where it should be but when you scroll the cards only move 10px or so. How can I fix this so its dynamic for all screens? Also the #card-row is hugging to the left which i cant get to center either?
I want to accomplish a certain effect in which the bottom border of the fieldset should overlay the content inside it, with a z-index lower than the content so it could look like this:
What I got so far was the simple thing, in which each circle in contained inside the fieldset, but no effect whats so ever.
The HTML and CSS code follows. Any lead on how to accomplish it is wellcome, I researched but didn't find any documentation of the fieldset tag that helped.
fieldset {
margin-left: 80px;
margin-right: 80px;
padding-bottom: 50px;
padding-bottom: 20px;
border: 5px dotted rgb(88, 85, 86);
}
label {
float: left;
width: 25%;
margin-right: 0.5em;
padding-top: 0.2em;
text-align: right;
font-weight: bold;
}
legend {
padding: 0.2em 0.5em;
max-width: 475px;
color: rgb(88, 85, 86);
text-align: center;
font-family: 'gotham-book';
font-size: 32px;
}
<form>
<fieldset>
<legend>Veja como é fácil participar</legend>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12" style="margin-left: 9%">
<div class="circles circle-yellow">
<img class="img-responsive" src="\galeria\repositorio\images\landing\mensalidades-iguais\money.png">
<p class="yellow-texto">
Mensalidades que cabem no seu bolso
</p>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div class="circles circle-yellow">
<h1 class="yellow-parcelas">12x</h1>
<p class="yellow-texto">
parcelas iguais
</p>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div class="circles circle-red">
<span class="red-span">R$</span>
<h1 class="red-parcelas">162</h1>
<p class="red-texto">
mensais
</p>
<small class="red-small">R$ 1.944,00 ANUAL</small>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div class="circles circle-light-blue">
<span class="light-blue-span">R$</span>
<h1 class="light-blue-parcelas">37</h1>
<p class="light-blue-texto">
mensais
</p>
<p class="light-blue-texto">
material
</p>
<p class="light-blue-texto">
didático
</p>
<small class="light-blue-small">R$ 444,00 ANUAL</small>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div class="circles circle-dark-blue">
<div class="dark-blue-texto">total</div>
<span class="dark-blue-span">R$</span>
<h1 class="dark-blue-parcelas">162</h1>
<p class="dark-blue-texto">
mensais
</p>
<small class="dark-blue-small">R$ 1.944,00 ANUAL</small>
</div>
</div>
</fieldset>
</form>
The trick is to use absolute positioning to take advantage of the z-index, as shown in my JS Fiddle. I won't bore you with the details you can read more about it here > Link. I'll leave my code below, any further questions feel free to ask.
* {
margin: 0;
padding: 0;
}
.wrap {
position: relative;
width: 90%;
margin: 0 auto;
margin-top: 1em;
background: #ccc;
height: 200px;
border: 2px dotted #f0f;
}
.inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0 auto;
width: 80%;
height: 200px;
background: #f0f;
margin-top: 100px;
}
<div class="wrap">
<div class="inner">
<!-- Your Icons here. -->
</div>
</div>
NOTE:
If this answer met your needs don't forget to mark it as correct for other users to find when surfing the web. Thanks.
Regards,
-B
body {
margin-left: 50px !important;
margin-right: 50px !important;
}
.section {
background: rgba(255, 255, 255, 0.69);
height: 200px;
border: 1px solid #000;
}
.outer {
display: table;
width: 100%;
height: 100vh;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.parent-div {
margin: 0 auto;
width: 82%;
}
.table-parent {
display: table;
}
.table-child {
display: table-cell;
vertical-align: middle;
}
.section:hover {
color: #ececeb;
transition: all 0.3s;
cursor: pointer;
}
.table-child .fa {
padding-right: 6px !important;
}
.section:hover .item-overlay.bottom {
bottom: 0;
}
.item-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
width: 100%;
-moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.bottom {
bottom: 100%;
}
.table-child p {
display: inline-block;
text-rendering: auto;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
a {
text-decoration: none;
color: #333 !important;
}
#AddProduct {
display: inline-block;
}
#media screen and (max-width: 767px) {
.col-xs-12 {
width: 100% !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row outer">
<div class="row inner">
<div class="clearfix parent-div">
<a data-toggle="modal" data-target="#myModal">
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-plus-circle" aria-hidden="true"></i>
<p>ADD A PRODUCT</p>
</h4>
</div>
</a>
<a>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-pencil" aria-hidden="true"></i>
<p>EDIT A PRODUCT</p>
</h4>
</div>
</a>
<a data-toggle="modal" data-target="#removeModal">
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-minus-circle" aria-hidden="true"></i>
<p>REMOVE A PRODUCT</p>
</h4>
</div>
</a>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-bars" aria-hidden="true"></i>
<p>USER'S LIST</p>
</h4>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-sort" aria-hidden="true"></i>
<p>ORDERS</p>
</h4>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-power-off" aria-hidden="true"></i>
<p>LOGOUT</p>
</h4>
</div>
</div>
</div>
</div>
</body>
I am using Bootstrap v3. The divs are not taking 100% width in mobile devices with col-xs-12. Code is working fine for medium and small screens but retaining the 50% width for screens less than 768. Here is the link to the screenshot of the behaviour.
Image
Gone through all other available solutions but none worked for me.
I don't know how to put this into words but I am getting the desired output on resizing the browser window but the code doesn't seem to work on the actual device and the web inspector. Screenshot of the device Image
Additionally I tried with !important as well at the end of css but facing the same problem.
Taken from comment of chetan kalra and posting answer for quick reference for others. I also faced this issue and found viewport meta tag was missing. Adding below line did the trick.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have this div with a class of .win_box:
The div is surrounded by a Bootstrap column. The link is allowing the user to allow the link throughout the entire Bootstrap column itself. I only want users to have access to this link on the actual div itself. How do I do this?
.win_box {
position: relative;
left: -12px;
height: 110px;
width: 196px;
background: #353535;
}
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-g" id='title'>
<a href='#'> <div class='win_box'> <i class="fa fa-play" aria-hidden="true" id='video'></i> </div> </a>
</div>
Add
display:inline-block;
to the .win_box class and you are good to go.
.win_box {
position: relative;
left: -12px;
height: 110px;
width: 196px;
background: #353535;
display:inline-block;
}
and you are good to go
You can do this using a display: inline-block;
.win_box {
position: relative;
left: -12px;
height: 110px;
width: 196px;
background: #353535;
display: inline-block;
}
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-g" id='title'>
<div class='win_box' onClick="window.location='https://google.com';" > <i class="fa fa-play" aria-hidden="true" id='video'></i> </div> </a>
</div>
The other option is to use JS for linking. onclick="location.href='www.google.com'"
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-g" id='title'>
<div class='win_box' onclick="location.href='www.google.com'"> <i class="fa fa-play" aria-hidden="true" id='video'></i> </div>
</div>
Fiddle - https://jsfiddle.net/6n2bpep4/2/
I'm trying to center four h4 tags within their respective fixed divs (all with width: 100% to keep their background-color: rgba(255, 255, 255, 0.5); spanned across the whole browser width).
I've tried many combinations of CSS tags but haven't been able to sort it out.
Working draft: http://parkerrichard.com/new/art.html
HTML:
<!-- row 1: body -->
<div class="container thumb-page">
<div class="row thumb-col mb">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="fix"><h4 class="hidden-xs">PAINTING</h4></div>
<h4 class="centered hidden-lg hidden-md hidden-sm">PAINTING</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="fix"><h4 class="hidden-xs">DRAWING</h4></div>
<h4 class="centered hidden-lg hidden-md hidden-sm mt-sm">DRAWING</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="fix"><h4 class="hidden-xs">DIGITAL</h4></div>
<h4 class="centered hidden-lg hidden-md hidden-sm mt-sm">DIGITAL</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="fix"><h4 class="hidden-xs">VIDEO</h4></div>
<h4 class="centered hidden-lg hidden-md hidden-sm mt-sm">VIDEO</h4>
</div>
</div>
</div>
CSS:
/* Thumbnail section */
.thumb-col .fix {
position: fixed;
background-color: rgba(255, 255, 255, 0.5);
display: inline-block;
width: 100%;
}
.thumb-col h4 {
letter-spacing: 2px;
}
.thumb-col .fix h4 {
margin-top: 0px !important;
margin-bottom: 15px !important;
}
.thumb-col div a img {
margin: 0 auto !important;
display: block;
width: 200px;
}
I think the problem is that you make fixed position per header. Try to move all headers to new .conatainer above .thumb-page and add position: relative to this container row. Also keep same grid structure as you have for images and of course use text-align: center to each header text.
Edid:
Working fiddle
Remove position: fixed; and add text-align: center; to align the text
.thumb-col .fix {
position: fixed; - /* delete this */
background-color: rgba(255, 255, 255, 0.5);
display: inline-block;
width: 100%;
text-align: center; /* Add This */