I am creating a navigation bar, and i can't space the image and the button.
The Code file:
.mobile-navP4 {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="mobile-navP4">
<img class="logo-project-4" src="" alt="Logo Image" />
<button class="toggle-iconP4">
<i class="fas fa-bars fa-lg"></i>
</button>
</div>
Related
I have an issue with flexbox, where the 2 flex boxes side by side, do not share an equal height when scaling the page. I'll include a picture below, but one box contains a react-bootstrap carousel, while the other contains text. How do I keep them at the same height so that they will scale on all screen sizes?
Here is the JSX
<div className={styles.floatchild1}>
<Carousel fade className={styles.viewMap}>
<Carousel.Item>
<img
className="d-block w-100"
src="/open.jpeg"
alt="Front View of HICO Storage Unit, Grand Junction Colorado"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="/inside.jpeg"
alt="Inside of HICO Storage Unit, Grand Junction Colorado"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="/side-view-container.jpeg"
alt="Side View of HICO Storage Unit, Grand Junction Colorado"
/>
</Carousel.Item>
</Carousel>
<Button
className={styles.viewMapButton}
href="https://www.google.com/maps/place/2487+Commerce+Blvd,+Grand+Junction,+CO+81505/#39.0906152,-108.5944703,17z/data=!3m1!4b1!4m5!3m4!1s0x87471d18f2c3486b:0xe36fb2de2017f121!8m2!3d39.0906111!4d-108.5922816"
target="_blank"
>
+ View Map
</Button>
<div className={styles.buttonIdRow}>
<p></p>
<a>Jump to:</a>
Units
</div>
</div>
<div className={styles.floatchild2}>
<p>
Self Storage in <u>Grand Junction</u>, Co
</p>
<h2 className={styles.hicoLogo}>
<b>
<u>HICO Storage Company</u>
</b>
</h2>
<div className={styles.addressPhone}>
<h3 className={styles.address}>
<div className={styles.pinPicture}>
<Image
src="/pin.png"
alt="location pin"
width={20}
height={28}
/>{" "}
</div>
<div className={styles.location}>
2487 Commerce Blvd, Grand Junction, CO 81505
</div>
</h3>
<h3 className={styles.phoneWrapper}>
<div className={styles.phonePicture}>
<Image
src="/phone.png"
alt="location pin"
width={25}
height={25}
/>{" "}
</div>
<div className={styles.phone}>
<a className={styles.phoneColor} href="tel:8088962272">
<b>808-896-2272</b>
</a>
</div>
</h3>
</div>
<hr />
<div className={styles.hours}>
<div className={styles.officeHours}>
<p className={styles.TimeTitle}>Office Hours</p>
<p className={styles.TimeP}>
8:30am - 5:30pm Monday - Saturday
</p>
<p className={styles.TimeP}>10:30am - 3:30pm Sunday</p>
</div>
<div className={styles.officeHours}>
<p className={styles.TimeTitle}>Gate Hours</p>
<p className={styles.TimeP}>24/7 access</p>
</div>
</div>
<hr />
<Button href='/contact' className={styles.interestedButton}>Interested? Contact Us</Button>
</div>
</div>
And here is the CSS I'm using to style it
.wrapper {
overflow: hidden;
min-width: 300px;
display: flex;
flex-direction: row;
width: 90%;
font-family: 'southern';
align-items: center;
}
.floatchild1{
background: white;
flex:1;
min-width: 380px;
align-items: center;
}
.floatchild2 {
background: white;
flex:1;
min-width: 380px;
align-items: center;
padding: 4%;
}
Just change
align-items: center;
at .wrapper to
align-items: stretch;
Working codepen: https://codepen.io/maty1000/pen/oNEqvGY
I'm trying to pass the last two items over each other as shown on the bottom of this photo.
Is this possible as is by forcing a line break or do I have to change the display of the parent div?
The HTML structure looks like this :
<div class="wp-block-cover">
<ul class="articleslisteshp" id="lcp_instance_0">
<li>
<a>Lorem ipsum article title</a>
<span class="testcat" style="width: 100%;">
<a>Category1</a>
<a>Category2</a>
</span>
<a><img width="150" height="150"></a>
</li>
</ul>
</div>
Et voici le CSS que j'ai essayé :
ul.articleslisteshp{
display: flex;
flex-direction: column;
}
ul.articleslisteshp > li{
display: flex;
flex-direction: row-reverse;
}
I would take out the a tag from inside the list if possible and put it outside of it. Like so:
<div class="wp-block-cover">
<ul class="articleslisteshp" id="lcp_instance_0">
<a><img width="150" height="150"></a>
<li>
<a>Lorem ipsum article title</a>
<span class="testcat" style="width: 100%;">
<a>Category1</a>
<a>Category2</a>
</span>
</li>
</ul>
</div>
And use the following CSS to achieve what you asked for:
ul.articleslisteshp{
display: flex;
flex-direction: row;
}
ul.articleslisteshp > li{
display: flex;
flex-direction: column-reverse;
}
span.testcat {
display: flex;
flex-direction: column;
}
I have a template that mix bootstrap accordion and dropdown, the problem is that dropdown appears behind the next question card or what is the same, inside your card and is not seen.
template.html:
<div class="card-body">
<!-- Acordion -->
<div class="accordion" id="dlns_faqs_acordion">
{% for element in elements %}
<div class="card">
<div class="card-header dlns_faqs_acordion_heading" id="dlns_faqs_acordion_heading_{{ forloop.counter0 }}">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#dlns_faqs_acordion_content_{{ forloop.counter0 }}" aria-expanded="false" aria-controls="dlns_faqs_acordion_content_{{ forloop.counter0 }}">
{{ element.question }}
</button>
</h2>
<!-- Options -->
<div class="dropdown">
<button class="btn dlns_elements_button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-ellipsis-h"></span>
</button>
<div class="dropdown-menu dropdown-menu-right text-center" arial-labelledby="option_button">
...
<a>...</a>
...
</div>
</div>
</div>
<div id="dlns_faqs_acordion_content_{{ forloop.counter0 }}" class="dlns_faqs_acordion_content collapse" aria-labelledby="dlns_faqs_acordion_heading_{{ forloop.counter0 }}" data-parent="#dlns_faqs_acordion">
<div class="card-body">
{{ element.answer }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
style.css:
.dlns_faqs_acordion {
border: none;
}
.dlns_faqs_acordion_heading {
border: none;
background: transparent;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
flex-direction: row;
align-content: space-between;
}
.dlns_faqs_acordion_heading button {
color: var(--dlns_color_primary) !important;
}
.dlns_faqs_acordion_heading button.collapsed {
color: black !important;
}
.dlns_faqs_acordion_heading button:hover {
text-decoration: none;
}
.dlns_faqs_acordion_content {
color: var(--dlns_color_tertiary);
}
Here there are some images with the problem:
And the Fiddle:
https://jsfiddle.net/albertosanmartinmartinez/o287rysk/12/
Anybody cloud help me ?
Thanks in advance.
Since you did not create a fiddle or plnkr, i can only provide some suggestions:
Manually adjust the dropdown-menu box z-index to a very big value to see if it works.
Check the container who cut the dropdown-menu, to ensure the overflow property is set to visible.
Update:
.card {
overflow: visible;
}
https://jsfiddle.net/65fq347r/
I started playing with Bulma and Buefy framework and I'm stuck with this issue.
I'm trying yo replicate the google apps menù, I've create a navbar-item div and put the foloowing code inside:
<div class="columns">
<div class="column">
<a>
<b-icon
icon="cloud-outline">
</b-icon>
<span>function 1</span>
</a>
</div>
<div class="column">
<b-icon
icon="compass">
</b-icon>
Function 2
</div>
<div class="column">
<b-icon
icon="scatter-plot">
</b-icon>
Function 3
</div>
</div>
the output is:
The result that I want to achieve is the following:
How can I center the icon and move the text to a new line?
You could use flexbox to style your links:
.custom-nav a {
display: flex;
flex-flow: column nowrap;
align-items: center;
padding: 1em;
background-color: rgba(0, 0, 0, 0.1);
}
.custom-nav i {
font-size: 3rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.1/css/bulma.min.css" integrity="sha256-1nEaE91OpXJD7M6W5uSiqxhdmrY+lOOTHC1iUxU9Pds=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<div class="columns custom-nav">
<div class="column">
<a href="#">
<i class="fas fa-box-tissue fa-2x"></i>
<span>function 1</span>
</a>
</div>
<div class="column">
<a href="#">
<i class="fas fa-handshake-slash fa-2x"></i>
<span>function 2</span>
</a>
</div>
<div class="column">
<a href="#">
<i class="fas fa-head-side-mask fa-2x"></i>
<span>function 3</span>
</a>
</div>
<div class="column">
<a href="#">
<i class="fas fa-shield-virus fa-2x"></i>
<span>function 3</span>
</a>
</div>
</div>
You can do this with css flex. By using the additional keys:
flex-direction (says what direction the flex should apply)
align-items (aligns the items inside the container)
justify-content (spacing the items inside the container)
.columns {
display: flex;
justify-content: space-evenly;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.columns {
display: flex;
justify-content: space-evenly;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="columns">
<div class="column">
<span>icon</span>
<span>function 1</span>
</div>
<div class="column">
<span>icon</span> Function 2
</div>
<div class="column">
<span>icon</span> Function 3
</div>
</div>
How can I align heading and button in same line? The button should be on the right side of the page, and the heading should be on the left side of the page.
Html:
<mat-card>
<h1>Simple card</h1>
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-fab>Basic</button>
</mat-card>
Demo
You can use the position:absolute by adding this HTML/CSS code
HTML
<mat-card>
<h1>Simple card</h1>
<div class="buttons">
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-fab>Basic</button>
</div>
</mat-card>
CSS
.mat-card{ position: relative }
h1{ margin-right: 120px; }
.buttons{
position: absolute;
top:50%;
right: 0;
width: 120px;
transform: translateY(-50%);
}
Using flexbox will align buttons and text as vertically center too.
Guide for flexbox
HTML
<mat-card>
<h1>Simple card</h1>
<div class="buttons">
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-fab>Basic</button>
</div>
</mat-card>
CSS
h1 {
margin: 0;
}
.mat-card {
display: flex;
align-items: center;
justify-content: space-between;
}
Demo