how can i make div responsive for div - javascript

I have a div inside a div, my first div is a square, inside this frame I have a h2 tag, my frame works fine on mobile and browser, but when I shrink my h2 tag it stays outside the frame, inside the frame how can I make the h2 tag responsive
picture
home.js:
function Home() {
return (
<div className="home-page">
<div className="home-header">
<div className='home-first>
<h2>BAROO</h2>
</div>
</div>
</div>
)
}
export default Home
Home.css:
.home-page {
display: flex;
flex-direction: column;
flex: 0.65;
max-width: 100%;
width: 100%;
background-color: #00ACFE;
}
.home-header {
flex-direction: column;
display: flex;
border-radius: 20px;
background-color: rgb(200, 244, 244);
max-width: 90%;
margin-left: 65px;
margin-top: 0px;
height: 700px;
width: 100%;
}
h2 {
font-size: 100px;
transform: translate(-50%, -50%);
margin-left: 700px;
margin-top: 200px;
}
#media screen and (max-width: 800px) {
.home-header {
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.home-first >h2{
font-size: 100px;
width: 100%;
}
}

Actually I didn't understand why you used transform: translate(-50%, -50%) and margin-left: 700px I assume that you wanted it to be in the center, so I used align-items: center; to .home-header
codesandbox

center in mobile view, margin-left:auto; margin-right:auto;
#media screen and (max-width: 800px) {
.home-header {
max-width: 83%;
margin-left: auto;
margin-right: auto;
}
}

try removing flex-direction: column; from .home-header {}

Related

How can I change the width of the slides in swiperjs using slidesPerview?

I'm trying to get my swiper to look like this, with the active slide centered and the previous and next slide showing a little bit on the side.
However, I don't know how can I change the width of the slides and keep the slides centered
https://codesandbox.io/s/empty-wind-yxj67v?file=/index.html
.box {
max-width: 1440px;
display: flex;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
.box .banner-swiper {
width: 100%;
height: 100%;
display: flex;
position: relative;
}
.box .swiper-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.box .swiper-wrapper .prev-slide,
.box .swiper-wrapper .next-slide {
opacity: 0.4;
}
.box .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.box .swiper-slide {
width: 1000px;
}
.box .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.box .navigation {
display: block;
position: absolute;
width: 120px;
height: 56px;
z-index: 50;
bottom: 16px;
right: 236px;
}
.box .navigation .previous {
margin-right: 8px;
}
.box .navigation .previous,
.box .navigation .next {
width: 56px;
height: 56px;
background-color: #424142;
}
.box .navigation .previous i,
.box .navigation .next i {
color: white;
}
After inspecting, an inline style overwrites your .box .swiper-slide {width} property. If you wish to explicitly make the slide 1000px, use !important.
I would suggest at least using a more responsive approach. If the slider will span across the screen consider using 75vw as a measurement.

Container with Image & Image Description to be Responsive

I am trying to create this simple landing page where there is one row, which contains two <div class="image">, which are container div's which hold the image, the image title, and the image description.
I am trying to get it to be responsive so that when a user on mobile device access the page, the two images will be on one column as opposed to one row. I have started over and over adjusting CSS trying to get what I want, and the closest I have gotten is the example provided in the below snippet.
CSS Stylings I have tried but failed:
#media (min-width: ){} to change max/min size when the screen goes above/below certain pixels
Set a minimum size for the image itself
Tried the same for the container of the image
I couldn't get any of the above to make my landing page responsive.
.container1 {
display: flex;
justify-content: center;
position: relative;
margin-left: 160px;
margin-right: 180px;
}
.container1 p {
text-align: center;
margin: 0;
padding-top: -10px;
}
.container1 h3 {
margin: 10px;
padding: 0;
}
.armycontracts {
width: 100%;
text-align: center;
padding-left: 20px;
}
.armycontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts {
width: 100%;
margin: 0 auto;
text-align: center;
}
.landinghead {
text-align: center;
font-size: 25px;
font-weight: bold;
}
.projectInfo {
text-align: center;
font-size: 15px;
margin-top: 0px;
}
#contentRow {
margin-top: -50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
}
.ms-core-pageTitle {
display: none;
}
.row-one {
width: 100%;
text-align: center;
padding: 20px;
}
#media (min-width: 400px) {
.row-one {
display: flex;
justify-content: center;
}
}
.image {
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
min-height: auto;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
.image__img {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
border-radius: 0px;
}
.image__overlay>* {
transform: translateY(20px);
transition: transform 0.25s;
}
.image__overlay:hover {
opacity: 1;
}
.image__overlay:hover>* {
transform: translateY(0);
}
.image__title {
font-size: 2em;
font-weight: bold;
}
.image__description {
font-size: 1.25em;
margin-top: 0.25em;
}
#contentRow {
overflow-y: hidden;
}
#sideNavBox {
DISPLAY: none
}
#contentBox {
margin-left: 0px
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<p class="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="row-one">
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army" />
<div class="image__overlay">
<div class="image__title">Team 1 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3 <br>
</p>
</div>
</a>
</div>
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://media.defense.gov/2021/Feb/01/2002574582/-1/-1/0/210124-M-WH885-1032.JPG" alt="Usmc" />
<div class="image__overlay">
<div class="image__title">Team 2 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3
</p>
</div>
</a>
</div>
</div>
</body>
.row-one{
width: 80%;
text-align: center;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.image{
flex: 1 45%;
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
This works. JSFiddle
You can use 'flex-direction' to achieve what you want.
This page has pretty good information about it.
https://css-tricks.com/almanac/properties/f/flex-direction/
Apply a flex-direction to your 'row-image' class. Set it to 'column' when you want your elements to stack, set it to 'row' when the elements should flow in a line.

Center footer in a container with dynamic width

I use resizable split views with split.js
I have a very basic setup with 2 panes
How can I center bottom-footer in the right pane?
Since the width of the pain is dynamic the footer doesn't centered properly once pane resized.
I've tried all possible positioning - absolute, fixed, sticky, relative but nothing seems to be work.
JSFiddle
Split(['.split-left', '.split-right'], {
gutterSize: 10,
sizes: [33,67] // in %
})
body {
margin: 0;
height: 100vh;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-items: center;
}
.split {
width:100%;
height:100%;
border: 0px solid;
overflow: hidden;
}
.split-left {
background-color: rgb(250,250,250);
padding: 20px;
padding-top: 0px;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 60px;
}
.split-right {
background-color: rgb(253,253,253);
background-color: white;
padding-top: 0px;
padding-right: 50px;
padding-left: 50px;
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
}
.gutter {
cursor: col-resize !important;
height: 100%;
background: #ddd;
}
.footer {
position: fixed;
bottom: 0;
width: 60%;
background: rgba(255,0,0,0.2);
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.11/split.min.js"></script>
<body>
<div class="content">
<div class="split split-left">
</div>
<div class="split split-right">
<div class="content"></div>
<div class="footer">Footer</div>
</div>
</div>
</body>
you can use css flexbox
.split-right {
display: flex;
justify-content: center; // center horizontally
align-items: center; // center vertically
}
css flexbox tutorial

Less clunky way of creating a responsive web header?

I've currently got a website header that functions fine on a desktop. I had initially planned to stack the content so that the pages would then display under the logo. I have seen hamburger menus used for a drop-down which is what I'd ultimately like to achieve, retaining the logo on the left.
I know this will likely take time but I think I'm almost there. I just think it'd be easier to have the same elements be responsive rather than creating two separate headers and toggling visibility.
So currently I have this:
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
.mobile-header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.mobile-logo-container {
float: left;
width: 60%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.mobile-navigation-container {
width: 20%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.mobile-logo {
height:8vh;
max-width: 60vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:2vh;
display: block;
object-fit: contain;
}
#media only screen and (max-width: 500px) {
.header {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.header-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.logo-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.navigation-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.logo {
visibility: hidden;
}
}
#media only screen and (min-width: 501px) {
.mobileheader {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-header-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-logo-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-navigation-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-logo {
visibility: hidden;
}
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="./stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
<div class="mobile-header">
<div class="mobile-header-container">
<div class="mobile-logo-container">
<img class="mobile-logo" src="/logo.png" alt="Logo">
</div>
<div class="mobile-navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
<div class="headerfill">
</div>
This looks fine, and is suitable for desktop use. I just need them to be responsive in a way when on mobile the elements adjust.
The icons don't have to switch and I know that can be done with event listeners if needed. Just not sure how to have the original elements format differently on mobile devices without creating two separate headers.
Hopefully the image gives a good enough idea of what I'm aiming for. First time I've tried to attempt this sort of drop-down navigation so thanks in advance :)
UPDATE
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="./stylesheet3.1.css">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
Hope this helps. I need to find a way to incorporate that design (using the code I already have) with the answer from #Nyan. I've removed the media queries and the separate mobile and desktop headers. Can't figure this out.
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})
header{
position: relative;
display: flex;
background: #ccc;
justify-content: space-between;
}
nav{
display: flex;
}
nav a{
display: block;
padding: 10px;
background: #ddd;
border: 1px solid #aaa;
}
button{
display: none;
}
#media (max-width: 400px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active{
display: block;
}
button{
display: block;
}
}
<header>
logo
<button>menu</button>
<nav>
Page1
Page2
Page3
Page4
</nav>
</header>
It'd run like that, with that structure but retain the initial design. (image above)
You can create just button, which is hidden on big screens and visible on small, and listen click event on it. Or if you don't want to create new elements at all, you can use ::after and ::before, and listen them.
Listener can, for example, toggle class active on list.
List itself can be absolutely positioned to bottom of header, and hidden when doesn't have active class.
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})
header{
position: relative;
display: flex;
background: #ccc;
justify-content: space-between;
}
nav{
display: flex;
}
nav a{
display: block;
padding: 10px;
background: #ddd;
border: 1px solid #aaa;
}
button{
display: none;
}
#media (max-width: 400px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active{
display: block;
}
button{
display: block;
}
}
<header>
logo
<button>menu</button>
<nav>
one
two
three
four
</nav>
</header>
Which one of this steps cause you more questions?

How to align all left floated elements in center of their parent?

.container{width:50%;padding:10px;box-sizing:border-box;background-color:#00FF00;}
.container::after {content: ''; display: table; clear: both;}
.child{width:100px;height:30px;line-height:30px;text-align:center;border-radius:2px;background-color:#FFFF00;float:left;margin:2px;}
<div class="container">
<div class="child">First</div>
<div class="child">Second</div>
<div class="child">Third</div>
<div class="child">Fourth</div>
</div>
I want to align the content of .container in center without using property display: inline-block; on .child.
see here : jsfiddle
EDITED : use display:flex with justify-content:center on the .sub-container and display:inline-block to .child
or you could use float:left on .child , it still works. but i suggest you don't use float when you want to center smth
code :
.child
{
width: 50px;
height: 30px;
text-align: center;
border-radius: 10px;
background-color: #FFFF00;
display:inline-block;
}
.sub-container
{
width: 50%;
height: auto;
padding: 10px;
box-sizing: border-box;
margin: 0px auto;
background-color: #00FF00;
float: left;
text-align: center;
position:relative;
display: flex;
justify-content: center;
}
let me know if this was what you were looking for
Add to .main-container { margin: 0 auto; display: table; } and remove width:100%;
Maybe this can help you:
Add margin 50% - half the width of the container. Just a disclaimer: this is not supported in some of the browsers.
.child {
width: 100px;
height: 30px;
margin-left: calc(50% - 50px);
text-align: center;
border-radius: 10px;
background-color: #FFFF00;
float: left;
}

Categories