I've been stuck on this problem for hours.
This is my Header.js
<div className="navbar-inner">
<h2>Text1</h2>
<h3>Text2</h3>
</div>
This is my Header.css file:
.navbar-inner {
margin: 0 auto;
color: #fff;
display: flex;
width: 87vw;
background-color: red;
justify-content: space-between;
vertical-align: sub;
}
This is what is shown:
I would like Text1 and Text2 to be aligned on the same y-line:
You can give flex on h2 and h3 tag.
h2, h3 {
display: flex;
align-items: center;
}
align-items is what you need for vertically aligning text when using flex box.
I also removed the margin from the h2 and h3 elements (it is there by default).
.navbar-inner {
margin: 0 auto;
color: #fff;
display: flex;
width: 87vw;
background-color: red;
justify-content: space-between;
/* New styles */
align-items: flex-end;
padding: 5px;
}
h2, h3 {
margin: 0;
}
You will probably need to adjust the padding to align it how you actually want it in terms of how close the text should be to the edges.
Related
I am designing some cards in React. The sizing of different elements needs to be dynamic as the title and description can vary in length.
The basic structure of the card is (vertically) Title, info, description
<div className={styles.sample}>
<div className={styles.textContainer}>
<h1 className={styles.title}>{title}</h1>
<div className={styles.info}>
<span>
By: {author}
</span>
</div>
<div className={styles.description}>
<span>{description}</span>
</div>
</div>
<ButtonPrimary
classes={styles.button}
onClick={() => function}
text="READ ARTICLE"
/>
</div>
Both my .title and .description css class have overflow: hidden. This is always causing the title block to hide content before the description block.
What I want is for my title block to occupy at most 2 lines of content before hiding any extra content. Sometime the title will be short and in these cases the title should only occupy one line.
My scss
.sample {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
.textContainer {
display: flex;
flex-direction: column;
overflow-y: hidden;
margin-bottom: 25px;
.title {
#include font-rubik(26px, $black, 700);
line-height: 30px;
vertical-align: top;
height: 60px;
// min-height: 30px;
height: fit-content;
overflow:hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
}
.info {
#include font-rubik(12px, #B3B3B3, 300);
margin-bottom: 11px
}
.description {
#include font-rubik(14px, $black, 400);
overflow: hidden;
}
}
}
I am having this trouble with my game in where the screen creates a small scroll bar and the page won't fit on one screen. When I try changing the height in my body and html tags it seems like nothing is happening and when I try overflow:hidden it just stops me from getting to my play again button and doesn't actually fit the game onto one single page.
Here is the game link
https://jobaa11.github.io/connect-4-project-1/
This is my CSS for my body and main
body {
margin: 0;
height: 100vh;
display: grid;
justify-content: stretch;
align-items: center;
background-color: var(--blue);
}
main {
display: grid;
justify-content: center;
margin: 0;
}
I've tried several different options, but that scrollbar has been very persistent. Any suggestions?
This is also my footer which holds my play-again button that keeps causing the scroll bar issue I believe.
footer {
display: flex;
justify-content: space-evenly;
font-family: 'Press Start 2P', sans-serif;
color: rgb(75, 57, 57);
}
footer>button {
margin-top: 10px;
outline-style: groove;
background-color: #FEDF49;
border-radius: 5%;
font-family: 'Press Start 2P', sans-serif;
font-size: small;
}
footer>button:hover {
transform: scale(1.1);
opacity: 80;
color: red
}
#replay-again-btn {
cursor: pointer;
}
add to your css :
body {
margin: 0;
height: 100vh;
overflow:hidden;
display: grid;
justify-content: stretch;
align-items: center;
background-color: var(--blue);
}
I have navbar with few items and hamburger icon that should be displayed on low width, in this time navbar items should hide. With the button i want to change their display to bo flex and flex-direction set to column, so items will display vertically. I am trying to use this function, could you suggest me something ?
Here is the code :
let btn = document.getElementById('btn');
let menu = document.getElementsByClassName('hammburger-links')[0];
btn.addEventListener('click', function() {
menu.classList.toggle('openmenu');
});
.slider .hammburger-menu {
width: 16px;
height: 14px;
border: 0;
display: none;
position: absolute;
}
#media (max-width: 1425px) {
.slider .hammburger-menu {
display: inline;
}
.slider .hammburger-menu div {
background-color: #202124;
display: block;
width: 16px;
height: 2px;
margin: 4px 0;
}
}
.slider .hammburger-links {
padding: 0 1.250em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.slider .hammburger-links a {
padding: 0 1.500em;
text-decoration: none;
font-family: "Helvetica", Arial;
font-size: 11px;
color: #a6adb4;
}
#media (max-width: 1425px) {
.slider .hammburger-links a {
display: none;
}
}
.slider .hammburger-links .under-home {
position: absolute;
top: 2.5em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: #F6F8F9;
min-width: 12.5em;
min-height: 12.5em;
z-index: 1;
display: none;
}
.slider .hammburger-links .under-home a {
margin: 10px 0;
}
.slider .hammburger-links.openhome {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.slider .hammburger-links.openmenu a {
display: flex;
flex-direction: column;
}
<div class="slider">
<div class="hammburger-menu" id="btn">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="hammburger-links" id="menu">
HOME
<div class="under-home">
WORLD NEWS
TRAVEL
TECHNOLOGY
CITY
CULTURE
MORE...
</div>
DISCOVERY
PHOTOS
CONTACT
<img src="images/navbar-img.png" alt="">
</div>
</div>
document.getElementsByClassName returns an array. So you want to do let menu = document.getElementsByClassName('hammburger-links')[0]; or get the element by id (menu).
Doing that should add the desired class to the #menu element, but your CSS also has a problem. Your CSS selector .slider .hammburger-links .openmenu doesn't select anything. That selector looks for an element .openmenu that is a descendant of an element .hammburger-links, that is a descendant of element .slider. You need the element that belongs to classes hammburger-links and openmenu. The selector looks like this: .slider .hammburger-links.openmenu
However, that still doesn't reveal the menu elements. I found that changing the selector again to target child anchor elements (.slider .hammburger-links.openmenu a) did the trick, but you may want to go about that differently depending on how you want to implement it.
I'm toggling between two divs with jQuery (I'm new to jQuery...) and I want both divs to use the display: flex property. I'm able to assign it to the first/default toggle (Option 1), but the second toggle (Option 2) defaults to display: block, and I'm not sure how to hook onto that.
Any insight would be so helpful - thanks!
Here's a jsfiddle:
http://jsfiddle.net/fZemQ/97/
HTML
<div class="pricing-switcher">
<a class="toggle active" id="HS-College">High School and College</a>
<a class="toggle" id="Club-Youth">Club and Youth</a>
</div>
<div class="pricing-wrapper">
<div class="panels HS-College">Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1</div>
<div class="panels Club-Youth">Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2</div>
</div>
CSS
.panels {
display: none;
padding-bottom: 30px;
}
.panels.HS-College {
display: flex;
justify-content: center;
}
.panels.Club-Youth {
display: flex;
justify-content: center;
}
.pricing-switcher {
float: left;
width: 100%;
}
.toggle {
float: left;
display: block;
border: 2px solid #000;
margin-right: 10px;
cursor: pointer;
}
.toggle.active {
background-color: red;
}
jQuery
$(document).ready(function() {
$('.toggle').click(function(){
var self = $(this);
$('.panels').hide();
if(self.hasClass('active') ) {
self.removeClass('active');
$('.panels.HS-College').fadeIn();
}else{
$('.toggle').removeClass('active');
self.addClass('active');
$('.panels.'+ self.attr('id')).fadeIn();
}
});
});
You are not assigning the css to the other panel. So it has default block display.
.panels.HS-College, .panels.Club-Youth {
display: flex;
justify-content: center;
}
here is the updated fiddle http://jsfiddle.net/6n0zfdnd/
A little tough to say if this is what you are looking for, but try merging these two rules:
.panels {
display: none;
padding-bottom: 30px;
}
.panels.HS-College {
display: flex;
justify-content: center;
}
into one rule:
.panels {
padding-bottom: 30px;
display: flex;
justify-content: center;
}
Instead of using AddClass and RemoveClass you can simply call:
.toggleClass()
Jquery Ref here:
http://api.jquery.com/toggleclass/
Which will remove the class if existing and add if not.
I think this will help you to solve the problem...
In your CSS file Add below property for Club-Youth div class also...add this code snippet to your CSS.
.panels.Club-Youth {
display: flex;
justify-content: center;
}
And the resultant CSS code will be...
.panels {
display: none;
padding-bottom: 30px;
}
.panels.HS-College {
display: flex;
justify-content: center;
}
.panels.Club-Youth {
display: flex;
justify-content: center;
}
.pricing-switcher {
float: left;
width: 100%;
}
.toggle {
float: left;
display: flex;
border: 2px solid #000;
margin-right: 10px;
cursor: pointer;
}
.toggle.active {
background-color: red;
}
I want to add a feature such that when I click the flex-item it must expand to size of complete row below it. Like basically increase it's size when I click on it, and get back to previous size when I click it again.
The subsequent elements must remain of same size and be shifted to next row after the expanded clicked flex-item and follow the same properties of flex-box. The flex-items must be clickable elements which expand on click and get back to same size on another click.
I am not able to figure this out and I am new to front-end technologies.
$('#clickMe').click(function() {
$('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar'));
$(this).insertAfter($('[class^="flex-item"]').last());
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
ul li{
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
You can toggle class on click.
var i = 1; // just for differentiate divs
$('#clickMe').click(function() {
$('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar-'+i));
$(this).insertAfter($('[class^="flex-item"]').last());
i++
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
ul li{
display: inline;
}
.flexActive{
width:auto;
display:block;
flex: 1 1;
margin-right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
You might want to just add a class to the clicked flex-item that sets its width to 100%, then toggle this class on click.
Now I don't know if you wanted to: (a) just expand one flex-item at a time; or (b) you'd want to retract flex items on click only, but I made scenario (a) in my answer as this probably makes more sense. Nevertheless, you can go for scenario (b) by deleting this line of code:
$('.expand').removeClass('expand');
$('#clickMe').click(function() {
$('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar'));
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click','.flex-item',function(){
$('.expand').removeClass('expand');
$(this).toggleClass('expand');
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
ul li{
display: inline;
}
.expand {
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>