I want to expand the box_switch (red frame part) part of the image below to Top
and apply background color.
React.js
<div className="container">
<div className="row mx-auto text-center">
<>
<div className="col-12">
<div className="box_switch">
<img className="" src={plugon_pic} />
<p className="under_ic_switch_state">{item.state}</p>
</div>
</div>
</>
</div>
</div>
App.css
.box_switch {
position: relative;
background:#1E3E75;
padding:15px;
border-radius: 10px;
margin-bottom: 30px;
margin: ０ calc(50% - 50vw) 15px;
width: 100vw;
}
.box_switch {
position: relative;
background: #1E3E75;
padding: 15px;
border-radius: 10px;
margin-bottom: 30px;
margin: ０ calc(50% - 50vw) 15px;
width: 100vw;
}
<div class="container">
<div class="row mx-auto text-center">
<div class="col-12">
<div class="box_switch">
<img class="" src="https://via.placeholder.com/100" />
<p class="under_ic_switch_state">{item.state}</p>
</div>
</div>
</div>
</div>
then i think this will do
body {
margin: 0;
padding: 0;
}
.box_switch {
position: absolute;
left: 0;
top: 0;
background:#1E3E75;
padding:15px;
border-radius: 10px;
margin-bottom: 30px;
margin: ０ calc(50% - 50vw) 15px;
width: 100%;
}
.container {
position: relative;
}
This works
.container {
margin-top: 0 !important;
}
Related
Help me adjust my code so that it will be working in Safari. Initially I used answer from here with a few adjustments. I needed my card to be responsive and has some additional elements at the bottom.
Here's my code:
.gallery {
display: grid;
gap: 15px;
grid-template-columns: repeat(2, 1fr);
}
.card {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14);
max-width: 200px;
padding: 10px 10px 20px;
cursor: pointer;
position: relative;
}
.wrapper {
width: 100%;
position: relative;
margin-bottom: 20px;
}
.wrapper::before {
content: '';
padding-bottom: 100%;
display: block;
}
.img-grid {
display: grid;
border-radius: 4px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 3px;
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.img-grid > div {
position: relative;
width: 100%;
height: 100%;
}
.img-grid > div:first-child {
grid-column: 1 / span 2;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.logo {
width: 50px;
height: 50px;
background: gainsboro;
float: left;
margin-right: 15px;
}
h4,p {
margin: 3px 0;
}
p {
font-size: 13px;
}
<div class="gallery">
<div class="card">
<div class="wrapper">
<div class="img-grid">
<div>
<img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
</div>
<div>
<img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
</div>
<div>
<img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
</div>
</div>
</div>
<div class="logo"></div>
<h4>Logo name</h4>
<p>Some description</p>
</div>
<div class="card">
<div class="wrapper">
<div class="img-grid">
<div>
<img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
</div>
<div>
<img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
</div>
<div>
<img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
</div>
</div>
</div>
<div class="logo"></div>
<h4>Logo name</h4>
<p>Some description</p>
</div>
</div>
It works fine in Chrome, but it doesn't work in Safari(current and older). It's because I needed my cards to be responsive and always maintain square grid. So I used same trick on the wrapper that's widely used to maintain responsive squares. But as a result of that height: 100% is no longer working in Safari. Is there any way to make it work? I would appreciate some your help.
i'm using position: fixed and width 90% for a footer inside a overlay. The overlay and the footer are both 90% wider but the footer is wider. I guess it's because the footer ignores the scrollbar in chrome. Is there a way to solve this problem without JavaScript?
Here is quick example: https://jsfiddle.net/a15kpuL9/3/
The HTML:
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFooter">
</div>
</div>
</div>
</div>
</div>
The CSS:
.stickyFooter {
width: 90%;
text-align: center;
position: fixed;
bottom: 0;
height: 150px;
background-color: #F5F5F5;
}
.body {
text-align: left;
-webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
display: inline-block;
background-color: white;
border-radius: 10px;
margin-top: 150px;
width: 90%;
}
The Problem:
change the 90% to 90 vw instead. Here you go. :)
.stickyFooter {
width: 90vw;
text-align: center;
position: fixed;
bottom: 0;
height: 150px;
background-color: red;
}
.body {
text-align: left;
-webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
display: inline-block;
background-color: white;
border-radius: 10px;
margin-top: 150px;
width: 90vw;
}
.container {
text-align: center;
vertical-align: middle;
overflow-y: scroll;
height: 100%;
display: block;
width: 100%;
position: absolute;
right: 0;
left: 0;
margin: 0 !important;
max-width: 100%;
padding: 0;
}
.career-detail-inner-wrap {
background: green;
height: 800px
}
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap">
Inner
<div class="stickyFooter">
Sticky
</div>
</div>
</div>
</div>
</div>
I see one less closing div , could that be the problem
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
</div>
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFoooterSecond">
</div>
</div>
</div>
</div>
or
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFoooterSecond">
</div>
</div>
</div>
</div>
</div>
I am building a scrolling frame on a web page.
The frame is width: 90% of the page-width.
I have a total of 7 blocks but I only want to show 5 at a time with a left & right button for scrolling left and right. Each block is width: 18%
What are the minimum css styles I should consider to get starting building this?
What are the minimum css styles I should consider to get starting
building this?
Is this what are you trying to achieve?
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
text-align: center;
}
.wrapper {
display: inline-block;
width: 90vw;
height: 100px;
background-color: lightgray;
padding: 16px 0;
overflow-x: scroll;
text-align: start;
}
.content {
display: inline-block;
height: 100%;
width: calc(90vw / 5);
text-align: start;
float: left;
}
.content-wrapper {
height: 100%;
width: calc((90vw / 5) * 7);
text-align: start;
}
.buttons-wrapper {
position: absolute;
width: 90vw;
height: calc(100px - 16px);
}
.left-button,
.right-button {
position: absolute;
background-color: black;
width: 30px;
height: 30px;
top: calc(50% - 15px);
color: white;
text-align: center;
}
.left-button {
left: 0;
}
.right-button {
right: 0;
}
<div class="wrapper">
<div class="buttons-wrapper">
<div class="left-button">L</div>
<div class="right-button">R</div>
</div>
<div class="content-wrapper">
<div class="content" style="background-color: red"></div>
<div class="content" style="background-color: orange"></div>
<div class="content" style="background-color: yellow"></div>
<div class="content" style="background-color: green"></div>
<div class="content" style="background-color: lightblue"></div>
<div class="content" style="background-color: blue"></div>
<div class="content" style="background-color: violet"></div>
</div>
</div>
I have created a website and i am unable to make the tiled layout responsive. I am a beginner and i have no idea how to make my website responsive. Any help will be appreciated. The css and html is given below. Plus the background is repeating itself 3 times while i have added no repeat property in css.
HTML
<div class="grid">
<div class="tile hvr-reveal " id="tile1">
<div style="text-align: center;">
<div class="img-with-text ">
<p>
<strong>
Contact Us
</strong>
<img src="homepage images/file242.png" alt="sometext" width="64" height="64" id="img0"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal" id="tile2">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
Products
</strong>
<img src="homepage images/shopping145.png" alt="sometext" width="64" height="64" id="img"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal " id="tile3">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
Partners
</strong>
<img src="homepage images/celebration19.png" alt="sometext" width="64" height="64" id="img2"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal" id="tile4">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
About Us
</strong>
<img src="homepage images/men16.png" alt="sometext" width="64" height="64" id="img1"/>
</p>
</div>
</div>
</div>
</div>
CSS
body {
font-family: chewy;
color: #ffffff;
background-image: url(pictures%20for%20web/bg3.jpg) ;
background-position: center center;
background-attachment: fixed;
background-size: cover;
**strong text**background-repeat: no-repeat;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.grid {
width: 1140px;
height: 650px;
margin: auto;
}
.tile {
position: absolute;
width: 200px;
left: 451px;
top: 152px;
height: 152px;
box-sizing: border-box;
}
#tile1 {
top: 407px;
left: 754px;
width: 338px;
height: 196px;
margin-left: 2px;
margin-right: 2px;
background-color: #ff3300;
}
#tile2 {
margin-left: 2px;
margin-right: 2px;
top: 100px;
left: 980px;
width: 148px;
height: 154px;
background-color: #008000;
}
#tile3 {
top: 255px;
left: 523px;
width: 200px;
height: 150px;
background-color: #660066 ;
margin-left: 2px;
margin-right: 2px;
}
#tile4 {
top: 255px;
left: 118px;
width: 200px;
height: 150px;
background-color: #990000;
margin-left: 2px;
margin-right: 2px;
}
I'm guessing you want something like this:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
position: relative;
top: 0;
left: 0;
width: 90%;
height: auto;
margin-left: 5%;
background-color: #444;
display: block;
text-align: center;
}
.box {
border: solid 1px #000;
height: 200px;
width: 200px;
display: inline-block;
margin: 25px auto;
}
.box:nth-of-type(1){
background: yellow;
}
.box:nth-of-type(2){
background: red;
}
.box:nth-of-type(3){
background: blue;
}
.box:nth-of-type(4){
background: green;
}
Which will keep the boxes aligned and depending on the width of the browser, shifts them.
http://codepen.io/DB1500/pen/JGqaBZ
I need some advice on this issue i'm having. In the jsfiddle below, I'm trying to create a responsive grid layout. The issue with what i have is, i would like the text to be in the middle of each individual grid. I've tried bumping it using margin-top but instead of the images stacking onto each other while resizing, the images are overlapping each other. The end result desired will be to have the text aligned center onto the image and have no gaps on all sides of the grid when resizing according to various screen resolution.
Link: http://jsfiddle.net/kelvinchow/VaDS9/
<style type="text/css">
#wrapper {
display: block;
width: 100%;
height: auto;
background: green;
}
.box {
display: inline-block;
float: left;
width: 50%;
height: auto;
vertical-align: baseline;
background: red;
}
.box-img img {
width: 100% !important;
height: auto;
}
.box-title {
display: block;
background: grey;
height: 25px;
font-size: 20px;
font-family: helvetica, san serif;
color: blue;
text-align: center;
margin-top: -100px;
}
</style>
<div id="wrapper">
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
</div>
You'll get this:
Fiddle here: http://jsbin.com/osazav/1.
With this markup:
<body>
<div id="tl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="tr" class="box">
<p class="box-title">howdy</p>
</div>
<div id="bl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="br" class="box">
<p class="box-title">howdy</p>
</div>
</body>
And this css:
div.box {
background: url('http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png');
position: absolute;
height: 50%;
width: 50%;
background-size: cover;
background-position: center;
}
div.box p.box-title {
color: red;
background-color: black;
padding: 5px;
position: absolute;
margin: -10px -20px;
top: 50%;
left: 50%;
}
div.box#tl { top: 0%; left: 0%; }
div.box#tr { top: 0%; left: 50%; }
div.box#bl { top: 50%; left: 0%; }
div.box#br { top: 50%; left: 50%; }