I need your help. I made a weather app and it looks okay in desktop but when i tested it on my mobile phone, the contents that the white box is holding were going out of bounds vertically. I tried overflow methods and it didnt work so as defining its container height at 100% and 100vh and it didnt work as well? Any solution ideas?
here is the app that i deployed:
https://sleepy-badlands-75629.herokuapp.com/#
here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css "href="../stylesheets/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="appBox">
<div class="container">
<header class="text-center">
<h1>Local Weather App</h1>
</header>
<section class="geolocation">
<h1>Today's weather in your location:</h1>
<h2><span id="location"></span></h2>
</section>
<section class="temperature">
<h1>
<span class="tempDisp"></span>
<a id="fahrenheit" class="selected" href="#">℉</a> |
<a id="celsius" href="#">℃</a>
</h1>
</section>
<section class="condition">
<h1><span class="conDisp"></span></h1>
<div class="highLow col">
<p>
<span class="high"></span>°/
<span class="low"></span>°
</p>
</div>
<div class="humidity col">
<p><i class="wi wi-humidity"></i> </p>
</div>
<div class="wind col">
<p>
<i class="wi wi-small-craft-advisory"></i>
<span class="direction"></span><span class="speed"></span>
</p>
</div>
</section>
<section class="forecast">
<h1>5 Day Forecast</h1>
</section>
</div>
</div>
<script type="text/javascript" src="../src/app.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Raleway:400,800');
*{
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
/* overflow:hidden; */
font-family: raleway;
text-align: center;
background: no-repeat center center fixed;
background-size: cover;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.appBox{
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border-radius: 8px 8px 0 8px;
background: rgba(255,255,255,0.2);
}
.container{
width: 80%;
margin: 0 auto;
}
a{
text-decoration: none;
transition: all 1s;
color: black;
}
a:hover{
color: purple;
}
.selected{
color: blue;
cursor: default;
pointer-events:none;
}
header h1{
text-align: center;
}
.temperature{
font-size: 2em;
}
.condition p{
font-size: 1.3em;
}
.col{
font-size: 1em;
display: inline-block;
width:20%;
/* margin: 5px; */
/* padding: 10px; */
border: 1px solid black;
border-radius: 10px;
background: rgba(250,250,250, 0.3);
-webkit-box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
}
.forecast{
width:100%;
margin: 20px;
}
.forecast h1{
background: rgba(255,255,255,0.3);
border: 1px solid white;
margin-bottom: 0;
}
.fcol{
display: inline-block;
width:20%;
background: rgba(255,255,255,0.3);
border: 1px solid white;
}
#media(max-width:700px){
/* .appBox{
height: 100vh;
} */
.col{
/* display:block; */
width: 35%;
margin: 10px auto;
}
}
In your .forecast class, the margin: 20px; is pushing your forecast element off center in the smaller width screens. On the larger scale it's not quite as noticeable, but that 20px bump becomes much more noticeable once your real estate shrinks.
I used the developer console to reassign it to margin: auto; and it seemed to rectify the problem. Your element should also center fine with this change as it is a nested element.
.forecast {
width: 100%;
margin: auto;
}
That should do the trick!
Since your problem is that the content goes out of bounds, why not make the content size relative or use css media queries.
You can use vh to set the size of the content relative to the height of the viewport.
You can also use something like #media screen and (max-width: 480px) to determine when devices are small enough to cause the content to go out of bounds then write new sizes for the content here.
Related
I have this working on a project that convert div into images. everything works but I have having this problem on mobile resizing. anytime the web page loads for the first time I will have to use my hand to zoom in for it to fit mobile screen size. I have several method for it work but is not working. Take a look at my code and see if am doing it right. Am not good with JavaScript if there a script to get done I will be open to
<div class="container" >
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-7" style="background-color: #fff;">
<div id="outer">
<div class="meme-generator " >
<div class="meme-generator-wrapper" id="memeGeneratorWrapper">
<div id="memeGeneratorImg">
</div>
<div id="memeOverlay" class="meme-hidden meme-generator-overlay"></div>
<h4 class="name" id='outputAccHomePagePermalink'></h4>
</div>
<div class="meme-generator-controls">
<a class="button button-primary meme-upload" href="#" style="font-size: 17px; font-weight:bold;">
<label>
<input id="memeAddPhoto" type="file">
</label>
Add Photo
</a>
<a class="button button-primary" id="memeClearPhoto" href="#" style="font-size: 17px; font-weight:bold;">Clear Photo</a>
<button class="button button-primary" id="foo" style="font-size: 17px; font-weight:bold;">download</button>
</div>
<div class="home_page_title">
<input id="nameField" type="text" name="Accessable[accsc_home_page_title]" placeholder="Enter Your Name Here"
data-depend-id="accsc_home_page_title" style="font-size: 17px; font-weight:bold; margin-top: 20px;">
</div>
</div
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
.meme-generator-wrapper {
position: relative;
margin-bottom: 80px;
width: 492px;
height: 607px;
background: url("{% static 'dp.png' %}") no-repeat center right #222228;
-webkit-background-size: contain;
-moz-background-size: contain;
-ms-background-size: contain;
background-size: contain;
}
.meme-generator-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{% static 'dp.png' %}") no-repeat 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
z-index: 1;
}
.meme-generator-controls {
margin-top: 10px;
}
.meme-upload {
position: relative;
}
.meme-upload label {
background: #000;
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
opacity: 0;
top: 0;
left: 0;
}
.meme-upload input {
cursor: pointer !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cr-slider-wrap{
position: absolute;
bottom: 100%;
z-index: 99;
}
.name{
text-align: center;
font-size: bold;
text-transform: capitalize;
color :#ee2047 !important;
font-weight: bold;
}
.home_page_title input{
width:71%;
border: 1px solid #091639;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.meme-generator-controls .button {
background-color: #091639;
}
.meme-generator-controls .button:hover {
background-color: #ee2047
}
#media (max-width: 767px) {
.cr-slider-wrap{
position: absolute;
bottom: 100%;
left: 10%;
z-index: 99;
}
#wrap {
position: fixed;
max-width: 100%;
height: auto;
margin: 0 auto;
}
#outer {
left: -20px;
padding-left: 30px;
padding-top: 70px;
padding-bottom: 70px;
position: fixed;
width: 180%;
background: #fff;
transform-origin: 0% 0%;
border-radius: 10px;
box-shadow: 0px 3px 25px rgba(223, 207, 207, 0.2);
}
#mob{
width: 100vh;
}
}
Looks like you are using bootstrap, usually you can use the classes:
"img-responsive" for bootstrap 3
"img-fluid" for bootstrap 4
If you want to scale an image just using CSS though, you can set the max-width to 100% on the image tag. I have included a bootstrap example for using img-fluid on the img tag - Hope it helps :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" >
<div>
<img src="img.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</body>
</html>
I am very new to web development, but I have a simple card flip animation with javascript. It works fine until I add links to the back of the cards. Once I do this it will flip the correct card but open the links from the card above. I believe it has to do with event bubbling, but I am unable to find a solution that will work.
I want all cards to work like the first one. What I mean is that the card flips when clicked on and shows the information and the links that the user can click on if they want too.
const card = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
}
card.forEach((card) => card.addEventListener("click", flipCard));
:root {
--primary: #FFCE00;
--secondary: #FE4880;
--dark: #212121;
--light: #F3F3F3;
/* bottom back color*/
}
* {
margin: 0;
padding: 0;
}
body {
font-family: montserrat, sans-serif;
width: 100%;
min-height: 100vh;
}
.card {
margin: 100px auto 0;
width: 400px;
height: 600px;
perspective: 1000px;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card__inner.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-radius: 16px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}
.card__face--front {
background-image: url("iFoxify.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.card__face--front h2 {
color: rgb(0, 0, 0);
font-size: 32px;
}
.card__face--back {
background-color: var(--light);
transform: rotateY(180deg);
}
.card__content {
width: 100%;
height: 100%;
}
.card__header {
position: relative;
padding: 30px 30px 40px;
}
.card__header:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom left, var(--primary) 10%, var(--secondary) 115%);
z-index: -1;
border-radius: 0px 0px 50% 0px;
}
.pp {
display: block;
width: 128px;
height: 128px;
margin: 0 auto 30px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
border: 5px solid rgb(0, 0, 0);
object-fit: cover;
}
.card__header h2 {
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 900;
/* text-transform: uppercase; */
text-align: center;
}
.card__body {
padding: 30px;
}
.card__body h3 {
color: var(--dark);
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Card</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="iFoxify.png" alt="" class="pp" />
<h2>Swift and Java
<h2>
</div>
<div class="card__body">
<h3>iFoxify</h3>
<p>A simple app that shows random pictures of foxes.</p><br><br>
<p><a href="https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
<p><a href="https://apps.apple.com/us/app/ifoxify/id1576016692" target = "_blank" >iOS</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="babysleep.png" alt="" class="pp" />
<h2>Swift<h2>
</div>
<div class="card__body">
<h3>Baby Sleepytime</h3>
<p>A simple white noise app.</p><br><br>
<p><a href="https://apps.apple.com/us/app/baby-sleepytime/id1480001818" target = "_blank" ><img alt="ApplePlayBadge" src="Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg" width="200" height="70"></p>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
You need to close out your <a> tags. You've left them open, so everything under the first tag is a link.
Change:
<p><a href = "https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
To:
<p>Google Play</p>
Do that for all the card links.
Hello can someone help me make this website responsive for any device or give me a tip on how I could do it. I have already tried to work with flex-shrink, but it did not work. To be honest, the button animation is not from me -> CodePen preset. Probably one of the reasons why I can't make the "buttons customizable". (sry for my bad english ;) )
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KSSB</title>
<link rel="stylesheet" href="css.scss">
</head>
<body>
<h1 id="title">KSSB</h1>
<div id="content">
<div class="item container"><img class="img"
src="https://d1ras9cbx5uamo.cloudfront.net/eyJidWNrZXQiOiAiY29tLm51bWVyYWRlIiwgImtleSI6ICJpbnN0cnVjdG9ycy80Y2ViNmRiYzc5NDc0YjRmYWIyNTcwZjZiNTM2MjM0Mi5qcGVnIiwgImVkaXRzIjogeyJyZXNpemUiOiB7IndpZHRoIjogMjU2LCAiaGVpZ2h0IjogMjU2fX19"
style="width:160px;height:auto;"></div>
<div class="item container"><img class="img"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Flag_of_Germany_%283-2_aspect_ratio%29.svg/220px-Flag_of_Germany_%283-2_aspect_ratio%29.svg.png"
style="width:160px;height:auto;"></div>
<div class="item container"><img class="img"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg/1200px-Flag_of_the_United_Kingdom_%283-5%29.svg.png"
style="width:160px;height:auto;"></div>
</div>
<style>
#import url('https://fonts.googleapis.com/css2?family=Shippori+Antique&display=swap');
body {
background-color: black;
font-family: 'Shippori Antique', sans-serif;
}
#content {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
}
.item {
margin: 0 40px;
}
#title {
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 55px #ff0000, 0 0 75px;
font-size: 8vh;
}
.item {
position: relative;
}
.item::before,
.item::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
border: 2px solid rgb(255, 0, 0);
transition: all 0.25s ease-out;
}
.item::before {
background-color: rgb(255, 0, 0);
top: -15px;
left: -15px;
}
.item::after {
bottom: -15px;
right: -15px;
}
.item:hover::before {
top: 15px;
left: 15px;
}
.item:hover::after {
bottom: 15px;
right: 15px;
}
</style>
</body>
</html>
#media only screen and (max-width: xxem) {
write your css queries here.
}
try css media query, there are different breakpoints for different devices. I think it's 320px — 480px for mobile devices and 481px — 768px for tablets.
Ive been coding a site for a project a friend and I are working on. After spending more time than I should have researching how to use javascript to make site links load into a "content" div ive gotten it to work, que second problem: The content loads but sits within a small square inside the "content" div I was wondering how to resize the content being displayed within the div below is my page code
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Breezies Blog</title>
<style>
.header {
background-color: white;
background-image: url('file:///C:/Users/Zenga/Desktop/egoblog/bg21.png');
background-size: cover;
background-repeat: no-repeat;
color: black;
text-align: center;
max-width: 1000px;
height: 187px;
margin: 0 auto;
margin-top: 5px;
border: 1px solid white;
border-radius: 20px;
position: static;
}
a {
color: white;
}
ul {
padding: 5px;
background: rgba(0,0,0,.5);
position: relative;
top: 142px;
border-radius: 10px;
}
li {
display: inline;
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
}
body {
background-image: url('file:///c:Users/Zenga/Desktop/egoblog/fullbg.jpg');
background-size: cover;
background-repeat: no-repeat;
color: black;
}
section {
background-color: rgba(0,0,0,.5);
color: white;
position: relative;
height: 600px;
max-width: 1000px;
margin: 0 auto;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="header">
<nav id="menu">
<ul>
<li>Home</li>
<li>Cast Of Characters</li>
<li>History of Ego</li>
<li>Meet the Creators</li>
</ul>
</nav>
</div>
<br>
<section>
<div class="content" id="content"> </div>
</section>
<script>
function load_home(){
document.getElementById("content").innerHTML='<object type="text/html" style="overflow: hidden" data="main.html"></object>';
}
function load_cast(){
document.getElementById("content").innerHTML='<object type="text/html" style="overflow: hidden" data="cast.html"></object>';
}
function load_hist(){
document.getElementById("content").innerHTML='<object type="text/html" data="hist.html"></object>';
}
function load_create(){
document.getElementById("content").innerHTML='<object type="text/html" data="create.html"></object>';
}
</script>
</body>
</html>
you're not giving the content div a size so it just goes auto, give it a min-width and min-height
Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.
General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)
If you want to align the links vertically:
#header a {
...
line-height: 80px;
}
#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.
You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg