I have the following code:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
}
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>Resumè
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/1QQ3lCOVEBd551AuNOA-XA4x6s1I3AaCZ/preview" width="100%" height="1070"></iframe>
</div>
</div>
</section>
So on my end since I have the above code embedded in a website, the output looks like this:
However, when I view the website using a smaller screen, I am getting this output:
The problem is that the "template" (which is the grey part) extends to height: 1070 even on responsive mode. I want the grey part to end after the document with some margin like shown in the very first picture when you view it on a smaller device.
Expected Output:
Larger Screen
Same picture as the very first picture I sent, so no changes here really.
Smaller Screen:
The Blue Line is where the grey part should end, with some margin in between the document and grey part, as there is at the top. Any suggestions on how I can accomplish this?
I believe something like this:
made a class for the iframe, for the media query I put 140vw
why 140vw? the ratio of an A4 paper is around 1.4 (if you know its some other format... just change the ratio...) this means the height is 1.4 the width, so you can use that instead of a number as you're doing in the default settings.
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 140vw;
}
}
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>Resumè
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/1QQ3lCOVEBd551AuNOA-XA4x6s1I3AaCZ/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
Related
How can I position an image on top text. Like in the image given
Here is a basic example using flex. I put a border on the div so you can see exactly what the flex does. Also, for an example like this where you want the image to be directly over text, you have to lookout for default margins/padding. For example, the <p> element has a default margin which I set to 0.
.row {
display: flex;
flex-direction: column;
border: solid 1px black;
width: 200px;
height: 80px;
padding: 20px;
background-color: #1e3f5a;
}
p {
margin: 0; /* removes default p margin */
text-align: center;
font-size: 30px;
color: white;
}
img {
align-self: flex-end;
margin-right: 1.5rem; /* optional */
}
<div class="row">
<img src="https://dummyimage.com/55x25/ed7014/fff&text=Trending">
<p>Dex Activity</p>
</div>
You can also use the position css property for this, you can wrap these two tags with a div and use the css flex methods.
CSS Flex Example:
<div style="display:flex; flex-direction:column"><img src="IMG_URL" alt="..." style="align-self:flex-end"><p>Dex Activity<p/></div>
There is more than one technique.
Here's one, borrowed from w3schools:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>
</body>
</html>
I am bit troubled in aligning the content as shown in the image. Along with that I need to redirect to page 1 by clicking on content section and redirect to page 2 by clicking the icon separately. How can I solve it using javascript?
These things can be achieved without the use of JavaScript besides the point that it's generally bad practice to manipulate DOM with JavaScript as much can be done with css rules, animations, basic html.
To align the icon first you should try these css rules applied on icon element:
.your-icon {
top: 0;
right: 0;
}
Assuming your icon in html is declared like this:
<img src="foo.img" class="your-icon">
Although it depends on current rules applied (e.g. you should use other rule set if flex is enabled on parent element). Perhaps spacing with fixed values between content section is involved that is pushing the icon out of the way (padding, margin rules applied?).
As for navigation html href is good enough
.a {
/* width:400px; */
height: 300px;
border: 1px solid;
}
.b {
width: 100%;
float: left;
/* border:1px solid red; */
}
.c {
width: 70%;
/* border:1px solid; */
float: left;
/* display:flex; */
float: left;
}
.c div{padding: 5px;}
.d {
border: 1px solid;
}
.box {
width: 29%;
float: left;
border: 1px solid;
height: 100%;
}
.rTable {
display: block;
width: 100%;
}
.rTableHeading,
.rTableBody,
.rTableFoot,
.rTableRow {
clear: both;
}
.rTableHead,
.rTableFoot {
/* background-color: #DDD; */
font-weight: bold;
}
.rTableCell,
.rTableHead {
/* border: 1px solid #999999; */
float: left;
height: 17px;
overflow: hidden;
padding: 5px;
width: 20%;
}
.rTable:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div class='a'>
<div class='b'>
<div class='c'>
<div>Name</div>
<div>Address</div>
<div>PIN</div>
</div>
<div class='box'>ICON</div>
</div>
<div class='d'>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Time</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Duration</span></div>
<div class="rTableHead"><strong>Amount</strong></div>
<div class="rTableHead"><strong>Position</strong></div>
</div>
<div class="rTableRow">
<div class="rTableCell">5</div>
<div class="rTableCell">2</div>
<div class="rTableCell">3</div>
<div class="rTableCell">4</div>
</div>
</div>
</div>
</div>
I am building a home page and in this webpage, I have to display an image with text, paragraphe, button and an icon.
this is what I am trying to achieve:
And this is what I have:
I was able to make it works a few days ago but I realize that all the layout/css... was so complicated that my entire page was messed-up. So to prevent, any more complications, I have rebuild the page from the ground, by adding text then replace text by a content and make sure that all is fitting well.
As you can see the texte/title/icon/button are not on the image, it's all over the place. Perhaps, I need to use a div and the image as background.
I notice that it happened in the past that the element text, button,... placement which are supposed to by on top of the image, can move aroung sometimes and impacted by other element.
I am adding the code below :
import React from 'react';
import VillageBanner from '../assets/images/village-banner-icon.png';
import DiscoverImage from '../assets/images/discover-home.jpg';
import WhiteButton from '../components/materialdesign/WhiteButton';
import BlueButton from '../components/materialdesign/BlueButton';
import HomeCarousel from '../components/HomeCarousel';
import Slider from '../components/materialdesign/VillageSlider';
import TextContents from '../assets/translations/TextContents';
import './Home.css';
class Home extends React.Component {
render() {
const TheWorldIsYours =
<div className="home-full-section">
<div>
<img
src= { DiscoverImage }
className= "home-discover-background"
alt="Village"
/>
</div>
<div>
<div className="home-discover-text-container">
<h1>{TextContents.ThinkOfUs}</h1>
<p>{TextContents.TheWorldIsYours}</p>
<div className="button-discover">
<WhiteButton textSize="14" link_href="/discover" text={TextContents.DiscoverBtn} />
</div>
</div>
<div>
<img
src= { VillageBanner }
className = "home-discover-banner"
alt="Village"
/>
</div>
</div>
</div>;
const CuratedLearning =
<div className="home-section">
<h1>{TextContents.CuratedTitle}</h1>
<p>{TextContents.CuratedDesc}</p>
<BlueButton textSize="14" link_href="/hereisthemission" text={TextContents.HereIsBtn} />
</div>;
const WhatsTrending =
<div className="home-section">
<h1>{TextContents.TrendTitle}</h1>
</div>
const WhatsNearby =
<div className="home-section">
<h1>{TextContents.NearbyTitle}</h1>
</div>
return (
<div className="home-container">
<div>
{TheWorldIsYours}
</div>
<div>
{CuratedLearning}
</div>
<div>
{WhatsTrending}
<div>
<HomeCarousel />
</div>
</div>
<div className="add-space">
{WhatsNearby}
<div>
<Slider />
</div>
</div>
</div>
);
}
}
export default Home;
and the asssociated css is :
.home-discover-container{
width: 100%;
height: auto;
border-radius: 21.5px;
}
.home-discover-background {
width: 100%;
height: auto;
border-radius: 21.5px;
}
.home-discover-text-container {
width: auto;
height: auto;
position: absolute;
text-align-last: left;
top: 35%;
bottom: 0;
left: 20%;
right: 0;
}
.home-discover-text-container h1 {
position: relative;
width: 25rem;
font-family: Fredoka One;
font-size: 2,5rem;
font-weight: bold;
line-height: 1;
text-align: left;
color: #ffffff;
}
.home-discover-text-container p {
position: relative;
width: 200px;
font-family: Source Sans Pro;
font-size: 22px;
font-weight: normal;
text-align: left;
color: #ffffffff;
}
.home-container {
margin-bottom:5rem;
}
.home-full-section {
margin-left: auto;
margin-right: auto;
margin-bottom:4rem;
width: 100%;
}
/* tablet, ipad version (change font-size here if needed)*/
#media (min-width: 768px) and (max-width: 1024px){
.home-discover-text-container h1 {
font-size: 34px;
}
.home-discover-text-container p {
font-size: 22px;
}
}
/* mobile version (change font-size here if needed)*/
#media (max-width: 600px) {
.home-discover-text-container, .home-discover-text-container h1, .home-discover-text-container p{
width: calc(100% - 20%); /* subtract the left:20% of .text-tile in desktop-version and set full width */
}
.home-discover-text-container h1 {
font-size: 22px;
}
.home-discover-text-container p {
font-size: 18px;
}
}
.home-discover-banner {
width: 54px;
height: 82px;
position: absolute;
text-align: left;
top: 35.5%;a
bottom: 0;
left: 15%;
right: 0;
}
.button-discover {
position: absolute;
text-align: left;
top: 38%;
}
.button-curated {
position: absolute;
text-align: left;
top: 32%;
}
So what I am trying to achieve is to get the image, title, text, icon and button seen as a single element where the overall design stay as is and for responsivness, keeping almost the same design except that probably the font must be changed to keep it nice
Thanks for your help
Put it inside of a div and set the image as backgroung-image in css. You can also use position: absolute on the child and position: relative on the parent and some top: left: spacing to make it look nice.
It is my HTML & Javascript code:
footer {
background-color: #049e8c;
width: 100%;
height: 50pt;
text-align: right;
margin-top: auto;
bottom: 0;
}
<footer id="footer">
<div id="" class="">
hoge
hoge
</div>
</footer>
"Javascript"
Jscode
I want Edge to be like this
Edge does not fit on the screen. Also, footer stops on the spot.
I tried both Javascript and CSS but it didn't work on Edge when there is no element at the bottom of the screen. I want to be at the bottom of the page when there are more elements than the screen.
I recommend using CSS grids for all HTML templates. Otherwise it can be difficult to keep footer at the bottom for all screen sizes.
That being said, try using flexbox.
Insert all of your html in main and flexbox will push footer to the bottom of the page.
/* The magic: */
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FD2D; }
main { background-color: #DFDD; }
footer {
background-color: #049e8c;
height: 50pt;
text-align: right;
bottom: 0;
}
<body class="Site">
<header>Header</header>
<main class="Site-content">Content</main>
<footer>Footer</footer>
</body>
If you want to try CSS Grids, you need to do something like this.
All HTML content goes into the Site-content section. Hope this helped :)
/* Stlyes to make the demo easier to see: */
html{
height: 100%;
}
body {
margin: 0;
display: grid;
height: 100%;
grid-template-areas:
"header_section"
"Site-content_section"
"footer_section";
grid-template-rows: 100px 100% 50px; /* 100px for header, 100% for content section, 50px for footer */
}
.header {
grid-area: header_section;
background-color: #FDD;
}
.Site-content {
grid-area: Site-content_section;
background-color: #DFD;
}
.footer {
grid-area: footer_section;
background-color: #049e8c;
text-align: right;
}
<body>
<div class= "header">Header</div>
<div class="Site-content">Content</div>
<div class= "footer">Footer</div>
</body>
I don't exactly get the point inside the question. Maybe If You want to put your footer full the windows you can try to use "position" with the value "absolute
footer {
position:absolute;
background-color: #049e8c;
width: 100%;
height: 50pt;
text-align: right;
margin-top: auto;
bottom: 0;
left:0;
}
<body>
<footer id="footer">
<div id="" class="">
hoge
hoge
</div>
</footer>
</body>
I want to make a website that has a space at the top for a searchbar and then 4 divs in a layout like in
this image
I'm using d3 so the idea would be to represent the data in different ways, but I want the divs to adjust to the window, so something like this:
<div id ="main-bar">
</div>
<div id="view">
<div id="topLeft" class="linked-container" >
</div>
<div id="topRight" class="linked-container">
</div>
<div id="botLeft" class="linked-container">
</div>
<div id="botRight" class="linked-container">
</div>
</div>
But I don't know how to make them adjust to the window size.
I'm not pretty good at web developing so I wanted to know how could I do this in a simple way. Any suggestions?
Thanks in advance.
Edit: People are telling me I should not ask for tutorials, which is true. Anyway thanks for your answers, this is what I ended up doing:
#main-bar{top: 0; left:0; width:100%; min-height: 40px; height:10%; position: fixed; background-color: pink; }
#topLeft{top:10%; left:0; background-color: blue;}
#topRight{top:10%; left: 50%; background-color: red;}
#botLeft{top:55%; left:0; background-color: green ;}
#botRight{top:55%; left:50%; background-color: orange;}
I will look into media queries so I can better adjust the searchbar cause the min-height property is not doing what I want.
the best way to align the divs in css is with flexbox.
Check the flexbox guide here.
This should solve your problem: Working JSfiddle
<div class="wrapper">
<div class="search">Searchbar</div>
<div class="row1">
<div class="aside-1">Data #1</div>
<div class="aside-2">Data #2</div>
</div>
<div class="row2">
<div class="aside-3">Data #3</div>
<div class="aside-4">Data #4</div>
</div>
</div>
.wrapper, .row1, .row2 {
display: flex;
flex-flow: row wrap;
}
.search, .row1, .row2, .aside-1, .aside-2, .aside-3, .aside-4 {
flex: 1 100%;
}
.search {
background: tomato;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
.aside-3 {
background: deepskyblue;
}
.aside-4 {
background: green;
}
#media all and (min-width: 600px) {
.aside-1, .aside-2 { flex: 1 auto; }
.aside-3, .aside-4 { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.aside-1 { order: 1; }
.aside-2 { order: 2; }
.aside-3 { order: 3; }
.aside-4 { order: 4; }
}
body {
padding: 2em;
}
You can use the flex property if you want to adjust the size of your divs. Include the below given css in your stylesheet and you are good to go .
#view{
display:flex;
flex-wrap:wrap;
}
.linked-container{
width:50%;
height:200px;
}
You can check the working example in this jsfiddle link .
Also , for more info on flex css property try out this css-tricks link
You should learn Media queries, it will be helpful. Resize window to see.
EX: What media queries do.
Desktop
Mobile
Based on question,
body {
font-family: sans-serif;
font-size: .9rem;
}
h1 {
text-align: center;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #f2f2f2;
font-family: 'Open Sans', sans-serif;
}
.search {
width: 100%;
position: relative
}
.searchTerm {
float: left;
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 20px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus {
color: #00B4CC;
}
.searchButton {
position: absolute;
right: -50px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 95%;
padding: 5px;
padding-bottom: 2cm;
}
/* 1 column: 320px */
.autowide {
margin: 0 auto;
width: 98%;
}
.autowide img {
float: left;
margin: 0 .75rem 0 0;
}
.autowide .module {
background-color: #00B4CC;
border-radius: .25rem;
margin-bottom: 1rem;
}
.autowide .module p {
padding: .25rem .75rem;
}
/* 2 columns: 600px */
#media only screen and (min-width: 600px) {
.autowide .module {
float: left;
margin-right: 2.564102564102564%;
width: 48.717948717948715%;
}
.autowide .module:nth-child(2n+0) {
margin-right: 0;
}
}
/* 3 columns: 768px */
#media only screen and (min-width: 768px) {
.autowide .module {
width: 31.623931623931625%;
}
.autowide .module:nth-child(2n+0) {
margin-right: 2.564102564102564%;
}
.autowide .module:nth-child(3n+0) {
margin-right: 0;
}
}
/* 4 columns: 992px and up */
#media only screen and (min-width: 992px) {
.autowide .module {
width: 23.076923076923077%;
}
.autowide .module:nth-child(3n+0) {
margin-right: 2.564102564102564%;
}
.autowide .module:nth-child(4n+0) {
margin-right: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="autowide">
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=1" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=2" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=3" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=4" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
</div>
See here: https://jsfiddle.net/
#main-bar {
height: 50px;
width: 100%;
background: green;
}
#view {
display: flex;
width: 100%;
flex-wrap: wrap;
> * {
flex: 1 0 50%;
height: 200px;
display: block;
&:first-child {
background: red;
}
&:nth-child(2) {
background: yellow;
}
&:nth-child(3) {
background: purple;
}
&:last-child {
background: orange;
}
}
}
Note that this uses flex so you'll need to make some fallbacks/tweaks for specific browsers. I'd usually do this with some PostCSS Autoprofixers to help with browser support.
All the best!