I have HTML structure like this :
<div class="card-container">
<div class="intro-card">
<img src="/Users/thangna/Desktop/snkr/thang-files/webdev.jpeg" alt="">
<h3>CAREER</h3>
<p>Realizing that becoming a great web developer is not easy, I'm trying my best to achieve my targets everyday to level up myself. My journey as well as my achievement in my web developing career will be updated here once I have free timm !</p>
</div>
<div class="intro-card">
<img src="/Users/thangna/Desktop/snkr/thang-files/bball.jpeg" alt="">
<h3>BASKETBALL</h3>
<p>Realizing that becoming a great web developer is not easy, I'm trying my best to achieve my targets everyday to level up myself. My journey as well as my achievement in my web developing career will be updated here once I have free timm !</p>
</div>
<div class="intro-card">
<img src="/Users/thangna/Desktop/snkr/thang-files/webdev.jpeg" alt="">
<h3>CAREER</h3>
<p>Realizing that becoming a great web developer is not easy, I'm trying my best to achieve my targets everyday to level up myself. My journey as well as my achievement in my web developing career will be updated here once I have free timm !</p>
</div>
</div>
and its CSS below:
.card-container {
display: flex;
flex: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-left: auto;}
.intro-card {
display: flex;
flex: auto;
flex-direction: column;
justify-content: center;
width: 25%;
height: 700px;
border-radius: 20px;
background-color: #fff ;
padding: 10px;
margin: 5% 20px;};
.intro-card > img{
height: 200px;}
.intro-card > h3 {
margin: 10px;
text-align: center;}
As you can see , I really want to set the height of the image in the flex card to be 200 px but when I did it in CSS code, nothing changed !
enter image description here
You can see from the image, the image in the second card is still longer than the rest.
But I can change it to the same height when i added inline style directly to the img tag in my html code !
Can anyone explain for me why this happen and the solution to it ? Thank you a lot !
To give a higher priority to height put CSS at end of the CSS file.
In chrome, to apply img CSS there should be a pre-defined css for flex.
i.e.: img{ min-height: 0 }
Here is solution why it's not working in chrome.
Image height inside flexbox not working in Chrome
Related
I'm currently building a website with Blazor Pages on the .NET platform. I'm new to using HTML and CSS, and I decided to use the Bootstrap CSS library to work on my first website. I'd like to have a text container aligned to the left of my overall jumbotron component along with an image in the right. Something like this:
My website currently resembles this:
(the hair is a photo of me, not going to upload the whole image)
The image itself is rather large, so ideally I'd like to work with scaling. I know the img-fluid class can handle scaling within a parent container, but I'm not sure why it's not scaling down.
Here's my current HTML.
<div class="jumbotron">
<div>
<div class="container-fluid">
<h1 class="display-4">Welcome to my site!</h1>
<div class="container align-items-start">
<p class="lead text-left">Welcome to my personal site. I hope to use this as a place where you can learn more about me, my projects, and my ideas.</p>
<p class="lead text-left">I am just learning web development, so many aspects of this website won't be perfect. I hope that this place can serve as a living example of my progression!</p>
</div>
<div class="container">
<img src="/Images/Headshot2020.jpg" class="img-fluid" alt="Image of Matt Marlow"/>
</div>
</div>
</div>
There are multiple ways to achieve what you're looking for or create layouts in general.
I would strongly recommend avoiding using 3rd party libraries that you're not familiar with to build your webpage layout. You might be able to get help on this particular page, but you will get stuck again as soon as you want to create the next one.
It's kind of like trying to build a car without knowing how to weld.
You should read about using Flex (bootstrap is based on that). It might sound intimidating but it's very straightforward.
Start by building some blocks and see how they react with different settings applied to it. Once you feel comfortable, start expanding it and reach the design you want.
a helpful tip:
For each container or "box" you're building - apply some colorful background or border. This will allow you to see exactly which container is being affected and how by every change. So the thumb rule is: Each div gets it's own color.
Once you're satisfied with the layout, just remove all the colors and start inserting content.
Link explaining how to work with css flexbox
CSS Flexbox
And here's a snippet using basic flex to build the layout you wanted
body, html{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
.main-container{
background: gray;
width: 90%;
height: 90%;
border: solid 1px red;
display: flex;
padding: 50px;
box-sizing: border-box;
}
.left-panel{
width: 70%;
height: 100%;
border: solid 1px blue;
}
.right-panel{
width: 30%;
height: 100%;
border: solid 1px lime;
padding: 50px;
box-sizing: border-box;
}
.title{
font-size: 2.5em;
}
.content{
padding: 30px;
box-sizing: border-box;
border: solid 1px magenta;
line-height: 30px;
}
.image{
border: solid 1px;
width: 100%;
height: 100%;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
<div class="main-container">
<div class="left-panel">
<div class="header">
<div class="title">
Welcome to my site !
</div>
</div>
<div class="content">
Lorem ispum, some random text!
</br>
This is a markup example for my question
</div>
</div>
<div class="right-panel">
<div class="image">
A picture of me !
</div>
</div>
</div>
Bootstrap saves a lot of time and work-- setting breakpoints for a gazillion things is hard.
But when it comes to these kinds of problems, you need to KNOW enough html/css does and how it works. In particular, learn how flex layout works.
Then you will be able to choose the correct Bootstrap classes, knowing that your site will conform to best practices for a dynamic layout.
Use float-end on the image this will allow the text to flow around the image. I moved the image above the heading to align their tops.
<div class="container-fluid">
<img src="/Images/Headshot2020.jpg" class="img-fluid float-end col-4" alt="Image of Matt Marlow" />
<h1>Welcome to my site!</h1>
<p class="lead">Welcome to my personal site. I hope to use this as a place where you can learn more about me, my projects, and my ideas.</p>
<p class="lead">I am just learning web development, so many aspects of this website won't be perfect. I hope that this place can serve as a living example of my progression!</p>
</div>
BTW: jumbotron is obsolete.
Photo by Alison Wang on Unsplash
This is my first ever question on stackoverflow so I apologize if I'm not following standard etiquette.
I'm working on a blog final project for a class that requires a custom theme and I'm using tumblr to host it for reasons independent of coding. This is the first time I've used css for more than extremely basic styling purposes, and I'm relatively new to html/css-related work in general.
For my main page, I have a sticky sidebar on the left 1/4 of the page, and then 3 columns for posts in a tiled gallery sort of like (similar to masonry but I used css grid because masonry confused me). Overall, I'm pretty satisfied with how this is turning out. Due to my inexperience, it's not where I would ideally have it designed, but my goal is to be able to work on it as I learn more html/css/js after this class is over.
main page layout
about page currently
However, I'm having trouble with fixing an individual post page and my about page: when you click on an individual post, it's also being shown as a 3 column post, which is not my intention at all. Same with the about page. I think this is due to my usage of css-grid on the main page, but I'm confused as to how I can fix this on individual posts.
a note on my html/css - my friend let me borrow most of the sidebar-specific code which is why it's much nicer than some of the stuff I've written and she's helped me a lot during this process but the page issue isn't something she's ever really encountered because she doesn't use css-grid or columned design often.
I've tried simply writing a completely new html for the about page, but my sidebar uses meta/variables (that I think are) built into the tumblr theme editing interface, so my sidebar wouldn't show up correctly when I tried to do that. And I haven't tried anything for the posts because I didn't even realize they had an issue until earlier today.
I can provide other code snippets if this would help, but I'm not sure what to include other than these:
#sidebar {
top: 35%;
position: -webkit-sticky;
position: sticky;
background: #ffffff;
height: 40vh;
width: 20%;
text-align: center;
padding: 25px 10px 10px 10px;
border: 2px solid;
border-radius: 70% 30% / 20% 40%;
margin: 2% 2%;
}
#container {
column-count: 3;
display:inline-block;
grid-template-columns: auto auto auto;
grid-area: container;
width: 100%;
column-gap: 20px;
}
#house {
display: flex;
flex-direction: row;
justify-content: right;
}
.content{
width: 90%;
background-color: #ffffff;
padding: 20px;
margin: auto;
margin-bottom: 10px;
float: left;
}
<body id="{select:background}">
<div id="house">
<div id="sidebar">
<a href="/">
<h1>{Title}</h1>
</a>
<div id=“description”>
{Description}
</div>
<br />
<div class="sidebarlink">{text:link 1}</div>
<div class="sidebarlink">{text:link 2}</div>
<div class="sidebarlink">{text:link 3}</div>
<div class="sidebarlink">{text:link 4}</div>
</div>
<div id="container">
{block:Posts}
<div class="content">
[I've omitted the post types and their meta info for clarity]
</div>
{/block:Posts}
</div>
</div>
Any help at all would be greatly appreciated! If this has already been answered please direct me there as well, I'm not too well-versed in navigating stackoverflow yet.
I'm new to front end development and currently working on a website project.
It has a simple layout and I'm using CSS Flexbox to execute it. Works well in for example Firefox, and very poorly in Safari. I've done quite a bit of research and found out that Flexbox is not fully supported in older versions of Safari, however I have the newest version. Sizing and positioning doesn't work properly, aligning the items horizontally works.
Below is the desired look of one of the pages, in Firefox:
image
Below is the same page in Safari (it looks the same in Chrome):
image
When zooming out in Safari it looks like this:
image
.container4 {
font-family: "Chakra Petch", sans-serif;
font-size: 40px;
display: flex;
justify-content: center;
align-items: stretch;
gap: 50px;
.element4 {
padding-left: 50px;
padding-top: 50px;
align-self: flex-start;
flex: 1 1 50px;
}
.element4-2 {
padding-right: 50px;
padding-top: 50px;
align-self: flex-start;
flex: 1 1 50px;
}
<div class="container4">
<p class="element4">
Drummer and beat producer from Gothenburg, based in Oslo. The beats are
built around Pers drumming, <br />
using samples from a wide variety of genres <br />
mixed with other sounds.
</p>
<img class="element4-2" src="../Images/galgeberg.png" alt="wall2" />
</div>
Couple of problems:
if you want both columns to be 50% width on all screen sizes, you need to set flex:1 1 50% on both the p and the img tags.
if you want the img tag to scale up and down instead of always being it's full size, you need to set width:100%;height:auto on it.
if you want to center the two elements vertically all you need is align-items:center on their container (where display:flex is defined) and not use any vertical padding on them
As a matter of personal preference I would set display:block on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.
Code:
<div class="container4">
<p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
<img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>
<style>
.container4 {
font-size: 40px;
display: flex;
align-items: center;
gap: 50px;
}
.element4 {
padding-left: 50px;
flex: 1 1 50%;
}
.element4-2 {
padding-right: 50px;
flex: 1 1 50%;
width:100%;height:auto;
}
</style>
Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)
Few things, The align item stretch is causing the issue. also you need to make sure that you are diving the 50% gap for each element, third you have set the max-width of the image to maintain the sizing. here is the jsfiddle with responsiveness.
.container4 {
font-family: "Chakra Petch", sans-serif;
font-size: clamp(30px,20vw+1px,40px);
display: flex;
justify-content: space-between;
padding:2em;
}
.element4{
max-width:50%;
margin:auto;
}
.element4-2{
max-width:50%;
margin:auto;
}
.container4 img{
width:100%;
}
<div class="container4">
<p class="element4">
Drummer and beat producer from Gothenburg, based in Oslo. The beats are
built around Pers drumming, <br />
using samples from a wide variety of genres <br />
mixed with other sounds.
</p>
<img class="element4-2" src="https://www.ejin.ru/wp-content/uploads/2017/09/2-2400-696x392.jpg" alt="wall2" />
</div>
I never had problems using flexbox on modern browsers.
I'm assuming there is some typo/error in your css.
Without the entire code, it's hard to know what will and will not work for your specific layout.
Anyways, my approach would be more like:
.container {
font-family: "Chakra Petch", sans-serif;
font-size: 40px;
display: flex;
flex-direction: row; // makes sure it's treated as row
width: 100vw; // 100 viewport width = fills entire viewport width
height: 100%; // take 100% of available space (since you have a header)
justify-content: center;
align-items: center;
}
.page-paragraph {
margin: 0;
padding: 50px; // padding of 50px all around
}
.page-img {
width: 50%; // image is always 50% of available width
margin: 50px;
}
Any reason you are exclusively using classes?
If an element occurs only once, it's smart to give it an id instead.
You can specify an ID with the '#' selector.
Also scratch the break tags if you are going for a fluid layout,
in some cases you might only have the word 'drumming' in a single line.
I am working on a site that I am building for myself on squarespace which is why I am trying to write this using inline css. I am trying to get an image styled in a row with some text. The image should be 1/12 of the row. I need to do this in html/css because there will be additional, identically styled rows below the one that I am depicting in jsfiddle.
I can't seem to get he image to scale down and fit on the same row as the text, with the same height as the text. I had it working and then accidentally reverted my work... so it's time for a break. Hoping someone will take pity on me before I come back to it.
Here's my JSFiddle with image and text: https://jsfiddle.net/hrwj2u7c/
<div style="display:flex;flex-direction:row;flex-wrap:wrap;background-color:#bcc0c6">
<div style="flex:0 1 150px;">
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
</div>
<div style="flex:1 0 auto;">
<span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording. We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
Is this what you're trying to achieve?
<div style="display:flex;flex-direction:row;align-items: center;background-color:#bcc0c6">
<div style="flex: 0 0 150px;">
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png style="width: 100%">
</div>
<div>
<span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
Key points:
flex-basis: 150px; flex-grow: 0; on image container
width: 100%; on <img>
removing flex-wrap: wrap from the overall wrapper (which would cause the second div to go below).
i also added align-items: center to the wrapper, to align the flex items vertically. You can't really match their height, as you'll notice the second div varies in height significantly at various widths of the page, but you can align them vertically.
Now, the biggest problem with what you're trying to do (which is styling inline) is that it cannot be responsive, because you can't apply #media queries by using inline styles. However, what you can do is use <style> tags inside <body>. Example:
<style type=text/css>
.wrapper {
padding: 25px;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
background-color: #bcc0c6;
}
.wrapper> :first-child {
flex: 0 0 200px;
}
.wrapper> :first-child img {
width: 100%;
}
.wrapper> :nth-child(2) {
padding: 0 0 0 25px;
}
.wrapper> :nth-child(2)>span {
font-weight: bold;
font-size: 24px;
}
#media (max-width: 700px) {
.wrapper {
flex-wrap: wrap;
}
.wrapper> :first-child {
margin: 0 auto;
}
}
</style>
<div class="wrapper">
<div>
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
</div>
<div>
<span>I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
I used flexbox properties to make my section look like this:
It works fine on Chrome but I noticed a few differences when I checked firefox and safari.
This is how chrome looks like:
But on Firefox, I am not managing to apply to margin of 1% like I want as the red signal shows:
And on safari, the boxes are all one after the other:
It is a WordPress Site and not live yet. But here is my html structure:
<section id="services">
// here goes the title of the container
<div class="main-container col-lg">
// here go all the box
<div class="services-container">
// this one of the boxes
</div>
</div>
</section>
And the CSS:
#services {
background-image: url("img/Services-background.jpg");
background-color: red;
}
.col-lg {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: initial;
max-width: 100%;
}
.services-container {
color: #d6d6d6;
margin: 1%;
max-width: 100%;
width: 30%;
}
How Can I make this work on all browsers?
The best way to ensure that flex is working equally on all browsers is to use prefixes.
Here's the chart from MDN showing you the different browser prefixes available for flex box (and general browser support notices)
display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms--display: flex;
I strongly suggest you not use flexbox, but floats instead.
Delete all the flex properties your css should look like this:
#services{
background-image: url(img/Services-background.jpg);
overflow: auto;
}
.services-container {
color: #d6d6d6;
width: 30%;
float: left;
margin: 1%;
}
Then you can add the rest of the styling. It will work on all browsers.
Sometimes the HTML version may be the reason (it was in my case):
I looked for <!DOCTYPE html> at the top of the source code. My HTML turned out to 4.0 something and that was the reason (most probably) that flex did not work. Once that was changed, it worked well.
Good luck...