So, I'm doing a project on React and I have this div tag which is a container that consists of information portrayed in this first image. Then what I would like to do is within that div without having the page refreshed change the display into this second image. It is like a card stacking on each other. I have no idea what keywords to search on google so I couldn't find any examples to do this.
Here's my html and css code for my div in the first image.
HTML
<div className={styles.showTicketBox}>
<div className={styles.showTicketBox1}>
<div className={styles.userEligibleTickets}>
<p>Your Eligible Tickets</p>
<h3 style={tokenContent}>0 Ticket(s)</h3>
</div>
<div className={styles.userDepositedTickets}>
<p>Your Deposited Tickets</p>
<h3 style={tokenContent}>0 Ticket(s)</h3>
</div>
</div>
<div className={styles.showTicketBox2}>
<div className={styles.userWinningTickets}>
<p>Your Winning Tickets</p>
<h3 style={tokenContent}>0 Ticket(s)</h3>
</div>
<div className={styles.userTicketsAllo}>
<p>Your Allocation</p>
<h3 style={tokenContent}>0 SHI</h3>
</div>
</div>
</div>
CSS
.showTicketBox{
width: 100%;
display: flex;
justify-content: space-around;
padding: 20px;
margin-top: 2em;
.showTicketBox1{
width: auto;
height:auto;
display: inline-block;
}
.showTicketBox2{
width: auto;
height:auto;
position: relative;
display: inline-block;
}
}
Related
I have a <section> tag used as a container for multiple other elements. As a sibling of the <section> tag, I have an <h1> used as a timer of sorts. The thing is, the <section> tag is positioned exactly how I want it to without the <h1>, and when the <h1> exists, it moves the <section> tag over. How can I use the <h1> tag without moving the <section> tag over? Thanks!
(Required CSS below)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
margin: 0 auto;
}
/* The <h1> mentioned above*/
.timer {
margin: 10px;
font-family: roboto;
color: #F6E71D;
font-weight: 100;
font-size: 25px;
}
/*The container mentioned above*/
#card-container {
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
<h1 class="timer">Time left: </h1>
<section id="card-container">
<div class="card">
<div class="card-back">
<img class="logo" src="assets/logo.svg" alt="logo.svg">
</div>
<div class="card-front">
<h1 class="symbol">X</h1>
</div>
</div>
<div class="card">
<div class="card-back">
<img class="logo" src="assets/logo.svg" alt="logo.svg">
</div>
<div class="card-front">
<h1 class="symbol">X</h1>
</div>
</div>
If your goal is to have the timer in the top left and not affect other elements, give it the css property position: absolute; and do the rest of your styling to put things where you want them. This way it doesn't affect the positioning of other elements. I would highly recommend the use of flexbox or css grid if you haven't looked into them yet. It makes layout styling easier.
I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?
You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>
Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container
Ok, I have an odd problem trying to align content in 2 columns (achieved using display:table), and have the content in the column div be up top rather than bottom.
Here is my problem - see the buttons/content on far right are aligned at the BOTTOM of that div:
Here is how this is achieved - I am trying to do this:
<div class="content">
<div id = "centered">
<div id = "video">
<iframe style = "border-width: 0" width="600px" height="600px"
src="https://www.youtube.com/embed/nRG3wWeMqAQ?autoplay=1">
</iframe>
</div>
</div>
<div id = "righted">
<p id = "contentTxt"> <strong> Choose </strong>the option that sounds like you.</p>
<div class='button -dark'>im a user</div>
<div class='button -light'>im a store</div>
</div>
CSS:
.content #centered {
padding-left: 280px;
}
/*Divides into 2 sections*/
#righted {
display: table-cell;
padding-left: 2em;
}
#centered {
width: 600px;
display: table-cell;
padding-left: 270px;
}
#content {
display: table-row;
}
On the righted no matter what I do with margin-top, padding-top, or top it stays on the bottom there. How can I fix this?
Set the vertical align to move the content up
#righted {
vertical-align: top
}
and you probably need to remove the margin on the paragraph so it is at the very top and without the default margins from the browser
#righted p {
margin-top: 0;
}
The vertical-align property should do what you need here
.content #centered {
padding-left: 280px;
}
/*Divides into 2 sections*/
#righted {
display: table-cell;
vertical-align: top;
padding-left: 2em;
}
#centered {
width: 600px;
display: table-cell;
padding-left: 270px;
}
#content {
display: table-row;
}
<div class="content">
<div id="centered">
<div id="video">
<iframe style="border-width: 0" width="600px" height="600px" src="https://www.youtube.com/embed/nRG3wWeMqAQ?autoplay=1">
</iframe>
</div>
</div>
<div id="righted">
<p id="contentTxt"> <strong> Choose </strong>the option that sounds like you.</p>
<div class='button -dark'>im a user</div>
<div class='button -light'>im a store</div>
</div>
Use vertical-align: top for #righted
Also you have defined display: table-row for #content but content is not the id of a div so it should be .content
check the edited code
.content #centered {
padding-left: 280px;
}
/*Divides into 2 sections*/
#righted {
display: table-cell;
padding-left: 2em;
vertical-align: top;
}
#centered {
width: 600px;
display: table-cell;
padding-left: 270px;
}
.content {
display: table-row;
}
<div class="content">
<div id = "centered">
<div id = "video">
<iframe style = "border-width: 0" width="600px" height="600px"
src="https://www.youtube.com/embed/nRG3wWeMqAQ?autoplay=1">
</iframe>
</div>
</div>
<div id = "righted">
<p id = "contentTxt"> <strong> Choose </strong>the option that sounds like you.</p>
<div class='button -dark'>im a user</div>
<div class='button -light'>im a store</div>
</div>
Hope it helps
I have a <div> like below
<div style="right:0px;bottom:0px;position:absolute;">
</div>
When my mobile site is opened in portrait mode, this div is displayed correctly at the bottom right corner.
But, when opened in landscape mode it is displayed at corner and overlaps the elements already present.
I want this div to be at the bottom of all elements at the bottom right corner of the page. How do I do it?
I would suggest to use flexbox - but it could need to reorganise a little your css code
.page {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height:100vh;
}
.element {
height: 10px;
width: 80%;
border: 1px solid #000;
padding: 20px 0;
}
.element.bottom {
margin-top: auto;
background: red;
}
<div class="page">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element bottom">
</div>
</div>
Note: I am unable to edit the HTML, so I have to find a workaround.
HTML:
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">...</div>
<div id="rightColWrapper" class="rightColumn663Wrapper">...</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
The issue is that all of the divs inside #container, EXCEPT for #leftColWrapper and #rightColWrapper, need to be 100% width of #container, but #leftColWrapper and #rightColWrapper need to be stacked next to each other and centered (together) within the 100% #container, with a max-width of 1224px.
I tried utilizing the following jQuery to add a wrapper div around #left... and #right..., but it ended up grabbing the ads in those containers and placing them in the component where the JS for the page is stored.
(function($) {
$("#leftColWrapper, #rightColWrapper").wrapAll("<div class=\"colWrapper\" />");
})(jQuery);
I either need another solution to wrap those two divs together, so that I can set a max-width of 1224px and center them, or I need to know why this jQuery is picking up those ads and duplicating them within the JS component.
#container{
text-align: center;
font-size: 0;
}
#container > div{
outline: 1px solid #333;
display: inline-block;
min-height: 10px;
text-align: left;
width: 100%;
font-size: 14px;
}
#container #leftColWrapper, #container #rightColWrapper{
width: 50%;
max-width: 612px;
}
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">width: 50%;<br>
max-width: 612px;</div><div id="rightColWrapper" class="rightColumn663Wrapper">width: 50%;<br>
max-width: 612px;</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>