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 */
Related
I'm trying to have the text inside the "header rectangle"(darker purple) and place the heart image on the right side of the text like this
BUT I'm getting this result
with this html code
<div class="row book-header">
<div class="col-lg-4 text-right d-none d-lg-block avatar">
<img src="assets/images/avatar.svg">
<span class="name" >Hi Helana</span><br>
<span class="message">How are you today?</span>
</div>
</div>
or this one
with this html code:
<div class="row book-header">
<div class="col-lg-4 text-right d-none d-lg-block avatar">
<img src="assets/images/avatar.svg">
<div>
<span class="name" >Hi Helana</span><br>
<span class="message">How are you today?</span>
</div>
</div>
</div>
my css code is:
.book-header{
background-image: linear-gradient(269.78deg, #632095 0%, #4AC3E8 100%);
box-shadow: 0px 7.52083px 7.52083px rgba(0, 0, 0, 0.25);
height: 64px;
z-index: 300;
.avatar{
img {
width: 45px;
height: 45px;
margin-right: 20%;
margin-top: 1.5%;
}
.name {
margin-right: 32%;
color: #ffffff;
text-align: right;
padding: 0.2em 2em;
box-sizing: border-box;
font-weight: 600 !important;
font-size: 18px;
}
.message {
margin-right: 32%;
padding: 2em;
color: #ffffff;
text-align: right;
box-sizing: border-box;
font-weight: normal !important;
font-size: 15px;
}
}
Create a wrapper on both of the span and use flex on the header-wrapper container. I've simulated the image with the emoticon. You can use image also.
Flexbox
You just need to add the below classes in the header-wrapper if you are using bootstrap and remove the css.
d-lg-flex flex-row-reverse justify-content-between align-items-center
.header-wrapper{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
<div class="row book-header">
<div class="col-lg-4 text-right d-none d-lg-block avatar header-wrapper">
<div class="image">☺</div>
<div>
<span class="name" >Hi Helana</span><br>
<span class="message">How are you today?</span>
</div>
</div>
</div>
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
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Vertical alignment in Bootstrap 4
(2 answers)
Closed 5 years ago.
Hi I have created one button. I gave it bootstrap for centring. Now I need to get that button vertically align to centre of page without margin and padding. How would I do that?
HTML is given below
<div class="row">
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
<button class="case-study-button">
CASE STUDY <span class="fa fa-angle-double-down"></span>
</button>
</div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>
CSS is give below
/* without margin and padding */
.case-study-button {
height: 61px;
width: 267px;
border-radius: 30px;
background: transparent;
border-color: white;
border-width: 2px;
}
You can position the button absolute to 50% and then use transform translate to center it. Using a fixed width on the button might cause problems with responsiveness.
.wrap {
border: 1px solid black;
height: 300px;
}
.case-study-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 61px;
max-width: 267px;
border-radius: 30px;
background: transparent;
border-color: white;
border-width: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4 wrap"><button class="case-study-button"> CASE STUDY <span class="fa fa-angle-double-down"></span>
</button></div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>
You can set 'display:flex' to its parent div and 'align-items:center'.
.btnOuter{
display:flex;
align-items:center;
height:500px
}
.case-study-button {
height: 61px;
width: 267px;
border-radius: 30px;
background: transparent;
border-color: white;
border-width: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
<div class="btnOuter">
<button class="case-study-button"> CASE STUDY <span class="fa fa-angle-double-down"></span></button>
</div>
</div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>
Change the CSS part like this :-
.case-study-button {
height: 10%;
width: 267px;
border-radius: 30px;
background: transparent;
border-color: white;
border-width: 2px;
position:absolute;
top:45%;
}
I coded the first part of my page but when I try to go further down the elements don't go below but on existing elements. The page has a huge picture all over it with some text, but I want to put other text below the picture not on it.
.content {
text-align: center;
margin-top: 15%;
color: #fff;
}
h1 {
font-size: 80px;
font-weight: 700;
color: #fff;
}
.under {
font-size: 30px;
margin-top: 15px;
}
.button {
margin-top: 15%;
font-size: 25px;
}
.fa {
font-size: 80px;
}
.button {
padding: 20px 10px;
background-color: orange;
border-radius: 15px;
}
body {
background-image: url(https://source.unsplash.com/bmnuRawqdsI);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
html {
width: 100%;
height: 100%;
}
.body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 48, 56, 0.5);
background: rgba(44, 48, 56, 0.5);
color: rgba(44, 48, 56, 0.5);
}
<div class="body">
<div class="container">
<div class="content">
<i class="fa fa-coffee" aria-hidden="true"></i>
<h1>You Order. We Deliver.</h1>
<p class="under">Get Coffee In 3 Easy Steps.</p>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-0">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p class="button">Order A Coffee</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-0">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>How It Works.</h1>
<div class="row">
<div class="col-lg-4 col-md4 col-sm-4 col-xs-12">
<p>Order any coffee from one of our many brands.</p>
</div>
<div class="col-lg-4 col-md4 col-sm-4 col-xs-12">
</div>
<div class="col-lg-4 col-md4 col-sm-4 col-xs-12">
</div>
</div>
</div>
I'm try to do a footer with bootstrap and I need move a span element, this one is whitin of a column set up it with col-sm-4 class, How do I can move this one for instance 20px whitout affecting responsive design. Below I put a image about footer and the html structure and css. I appreciate any help.
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div id="location" class="col-sm-4 col-xs-3">
<span>Location</span>
</div>
<div id="info" class="col-sm-4 col-xs-3">
<span>Info about me</span>
</div>
<div id="created" class="col-sm-4 col-xs-3">
<p>texto</p>
</div>
</div>
</div>
</footer>
css:
.footer{
position: fixed;
bottom:0%;
height: 100px;
width: 100%;
background-color: #2c3e50;
}
#location{
background-color: white;
height: 50px;
}
#info{
background-color: gray;
height: 50px;
}
#created{
background-color: blue;
height: 50px;
}
You can use <span style="padding-left:20px;">move space 20px</span>
It will not affect responsiveness