Here is the link to the problem. http://garethjweaver.com/portfolio/gjw/index.php?page=gjw
Trying to create a container without having to use overflow. I have my main container for all of the content like so.
.container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
So far so good, I test it by placing a border around it and it shows it covers all of the content.
Now when I try and do another container for another section it doesn't work. Like so.
http://jsfiddle.net/4wN8q/
This is the other container I'm trying to create..
.portfolio-container {
width: 980px;
margin-left:auto;
margin-right:auto;
}
But when I add a border around it it doesn't cover all of the content, it just stays at the top covering nothing. overflow:auto can fix this although when I'm trying to make my images responsive the scroll bar shows up down the bottom and it doesn't scale and it will work if I take overflow out.
Thanks in advance.
EDIT: Updated to include the code for it
<div class="portfolio-container">
<div class="content-container">
<div class="content">
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text
</div>
<div class="arrows">
<a class="portfolio-button" href="#">Visit Website</a>
<i class="float-left fa fa-arrow-circle-o-left fa-3x"></i>
<i class="float-right fa fa-arrow-circle-o-right fa-3x"></i>
</div>
</div>
<div class="portfolio-images">
<img class="image-padding"src="./images/cz1-chrome.png">
<img src="./images/cz-chrome.png">
</div>
Had to change the image stylings instead of removing overflow
Related
I have a DIV with an icon on left side, and text on right side.
The text is dynamic and can be short or long.
If the text is short (A row or two) I want it to be centered to the icon.
If it's long, I want them to be vertically top-aligned.
Is there a way to do it with CSS only (no line counting)?
<div class="container" >
<div class="container__left">
<div class="container__left__icon" />
</div>
<div class="container__right">
// some react code with dynamic text in <div>s and <span>s
</div>
</div>
You can use display: table-cell and different vertical aligns - top for the first cell and middle for the second.
.inner1{
display:table-cell;
vertical-align:top;
}
.inner2{
display:table-cell;
vertical-align:middle;
}
<div>
<div class="inner1"><img src="https://via.placeholder.com/140x100"></div>
<div class="inner2">some text some text some text some text some text some text some text some </div>
</div>
<div>
<div class="inner1"><img src="https://via.placeholder.com/140x100"></div>
<div class="inner2">some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some </div>
</div>
.container {
display: flex;
flex-direction: row;
align-items: center;
}
You can use Flex Box CSS to do this very easily. You apply the flex to the parent div, establish the direction you want the boxes to fill the space (vertical or horizontal - in this case horizontally so we want to add a "row" direction"), and finally center those elements vertically using align-items set to center. This will account for any changes in the content in your right hand box. It also later makes making it responsive very easy.
I've coded a small page using Bootstrap 4 as a framework, but it's not responsive.
Here is my html:
<div class="container h-100 d-flex flex-column" id="container">
<div class="row align-items-start" id="header">
<div class="col">
header
</div>
</div>
<div class="row h-100" id="main">
<div class="col">
<p></p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
</div>
And here is my css
html, body {
height: 100%;
}
#container {
background-color: rgb(255, 219, 164);
}
#header, #footer {
background-color: rgb(33, 202, 202);
}
When I type a long paragraph inside the <p> element it goes it a bad way and I can't solve that. How can I make it full responsive?
Normally, if it's not responsive you've not imported the required JavaScript. Follow the Quick Start page on the official documentation and that it has been put in the correct place of your project (the </body>). Use a template to start with for better understanting
I can't yet comment because of my rep but adding more code (such as your </body> and <head> information will give the the community more understanding on what you're doing.
Better use min-vh-100 instead of h-100 (or vh-100) so that you define a min-height and in case you have a lot of content you will get a scroll.
#container {
background-color: rgb(255, 219, 164);
}
#header,
#footer {
background-color: rgb(33, 202, 202);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container min-vh-100 d-flex flex-column" id="container">
<div class="row align-items-start" id="header">
<div class="col">
header
</div>
</div>
<div class="row flex-grow-1" id="main">
<div class="col">
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
</div>
I tried to replicate the issue that you did mention above. I couldn't replicate it. Also take a look at the files included in tag. Please take a look at this codepen attached Codepen.
`
</div>
<div class="row h-100" id="main">
<div class="col">
<p>Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.</p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
`
I am creating a Bootstrap popover to show some information. There will be one or more pieces, each containing a icon and some text.
I am also using twig for this if that changes anything.
HTML
<span class="fa fa-user instructor-contact-info-header"></span>
<div class="contact-info-container">
<p class="instructor-contact-info-header">
{{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>
<p class="instructor-contact-info-data">Put other stuff here</p>
CSS I have
.instructor-contact-info-header {
display: inline-block;
color: #005993;
margin: 0;
}
How it looks:
#
text text text text text text
text text text text text text
text text text text text text
What I am trying to get:
# text text text text text text
text text text text text text
text text text text text text
# text text text text text text
text text text text text text
text text text text text text
EDIT:
After implementing the solution. Popovers with multiple people's contact info shows as follows:
# text text text text text text #
text text text text text text
text text text text text text
# text text text text text text
text text text text text text
text text text text text text
You have a span (inline element) next to a div (a block element). So the div is a new line. Just make the div inline-block as well to fix it:
.instructor-contact-info-header {
display: inline-block;
color: #005993;
margin: 0;
}
.contact-info-container {
display: inline-block;
vertical-align: top;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<span class="fa fa-user instructor-contact-info-header"></span>
<div class="contact-info-container">
<p class="instructor-contact-info-header">
{{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>
<p class="instructor-contact-info-data">Put other stuff here</p>
</div>
<div>
<span class="fa fa-user instructor-contact-info-header"></span>
<div class="contact-info-container">
<p class="instructor-contact-info-header">
{{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>
<p class="instructor-contact-info-data">Put other stuff here</p>
</div>
<div>
<span class="fa fa-user instructor-contact-info-header"></span>
<div class="contact-info-container">
<p class="instructor-contact-info-header">
{{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>
<p class="instructor-contact-info-data">Put other stuff here</p>
</div>
UPDATE:
Just wrap the whole thing in a div so it is block level.
I have a website that I'm trying to make responsive.
Some divs have to change places as mentioned in my older post: How to swap sides of 2 elements (one with float:left, the other is with float:right)
But this time it's much more complex.
This is how the page looks:
On the left div: an image.
On the right div: baner of the client, "the challange", some text, "out results", some text. "read more" link.
(right after it there is the same structure just with the image on the right and text on the left - using float on the divs).
And this is how it should look on a mobile:
First comes the banner - then the image - then the rest of the text.
This is my HTML structure:
<div class="cs">
<div class="leftDiv">
<img src="http://www.example.com/wp-content/themes/twentyfifteen-child/images/big-image.png">
</div>
<div class="rightDiv">
<a href="http://www.example.com/clients/theClientsName-case-study/">
<img src="http://www.example.com/wp-content/themes/twentyfifteen-child/images/banner.png" class="mini-logo-l">
</a>
<h1>The <span class="babyblue">Challenge</span></h1>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text . </p>
<h1>Our <span class="babyblue">Results</span></h1>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text .</p>
<p class="read-more text-yellow">Read more</p>
</div>
</div>
As you notice, the tags are inside tags on the desktop version, which is ok.
But when looking on the page on a mobile - a lot of tags inside the "left" and "right" divs have to swap places.
Here is a jsfiddle: http://jsfiddle.net/uh8L0g4t/
Here's the fiddle for what I described in the comments. I've used !important because you are unnecessarily increasing the priority of the elements so I'm a bit lazy to clone them to gain the priority for the elements in mobile view.
.desktop{
display:block;
}
.mobile{
display:none;
}
#media screen and (max-width:600px){
.desktop{
display:none;
}
.mobile{
display:block;
}
}
And for your HTML
<div class="left">
<img class="mobile" ... />
</div>
<div class="right">
<img class="desktop" ... />
</div>
It's the most 'elegant' way for your case. If you try to move things around without cloning the image, you will end up either using more code, or high chance of breaking something else.
I started yesterday with learning HTML and got stuck with a (simple) example:
Here's my HTML:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>stylish</title>
<link rel="stylesheet" href="stylish_sheet.css" />
</head>
<body>
<header> Header </header>
<nav>
<p>short</p>
<p>longernav</p>
<p>verylongnavigation</p>
</nav>
<section>
<div class="entry"> <h1> Section 1 </h1>
<p> text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
</div>
<div class="entry"> <h1> Section 2 </h1>
<p> text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
</div>
<div class="entry"> <h1> Section 3 </h1>
<p> text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
</div>
<div class="entry"> <h1> Section 4 </h1>
<p> text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
</div>
</section>
<footer> Footer </footer>
</body>
</html>
and the CSS code:
.entry {
float:left;
margin:10px;
padding:15px;
width:auto;
min-width:200px;
max-width:250px;
height:200px;
border:1px solid black;
}
header, footer {
background-color:black;
color:white;
text-align:center;
padding:5px;
width:100vw;
height:20px;
}
footer {
clear:both;
}
nav {
line-height:30px;
background-color:lightgrey;
height:100vh;
width:10%;
max-width:150px;
float:left;
padding:5px;
}
section {
width:80%;
min-width:250px;
max-width:100%;
float:right;
padding:5px;
}
Now I have 3 problems and one minor issue:
1) I want the min-width of the navigation to adapt to the longest text in it (in this case "verylongnavigation"). It doesn't matter if the text wraps. I set the max-width fix to 150px so I dont know what happens when the text is then actually longer than that. In this case the idea was that it still adapt to the text, i.e., text size has higher priority than max-width.
2) I want the height of the navigation to go from the header to the footer. It is colored lightgreyish but it never fills the total space. It seems height:100% only adapts to the text itself. I tried height:100vh but then the area gets higher than necessary, i.e., it gets bigger than the section part.
3) When I make the browser window width small then the "section" wraps below the "nav". How can I disable this s.t. I would have to scroll to the right to see the text in the sections?
4) The minor issue: for the header and the footer there is a small (~5px) white space to the left but not on the right. I tried to set width:100%-5px but it seems thats not possible. So I found margin-right:5px but this does nothing (whereas margin-top and margin-left does what I seek). Is there another way where I can merge relative sizes with absolute sizes or am I using it wrong?
Thank you in advanced,
Jan
Simply remove both, width and max-width from nav. This way the menu background will always cover the longest text.
To set the height of the nav background to the same as the content, you either have to define both to the same height or use faux columns (more on this can be read on many documentation on the web, one of them is this one).
Using faux columns (as explained above) section would not wrap below nav anymore. Basically they would be 2 different columns that would stand side by side always.
Elements in CSS have default styling. To get rid of those, one usually 'resets' those values by setting them to 0 as follows:
* {
padding:0;
margin:0
}
Here is some more info on resetting css.