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.
I have an input range in a div contained in an outer div that is smaller than the inner div. The final result is that my inner div scrolls horizontally (because the outer dive has overflow: scroll), and the input range is its child.
To customize the range, I removed the appearance in CSS with appearance: none. Now, here is what happens. When I check it in Chrome developer's tool (actually I use Brave, but I'm guessing it is the same in Chrome as I tested in Chromium, and it is the same) with the smartphone option active, 99% of the time if I try to move the range handle it moves the whole div with it. Now, if I disable the smartphone option, it works just fine. Also, if I keep the smartphone option and remove the appearance: none from CSS, it also works just fine, but my customizations to the range disappear. Does anyone know what is going on?
PS.: in Firefox, the input range doesn't work as long as I keep the smartphone option on (no matter if I have the appearance property or not).
Here is an animated gif of what I mean:
First, I have the described above with the input range with no appearance. It works fine, I can move the scrollable div and move the input range handle independently. Then I put the appearance: none to the input range (notice the formatting of the input range changes), now I can't move the input range handle independently from the scrollable div anymore. Finally, remove the appearance from the input range, and everything goes back to normal (but my customizations are gone)
Here is the code, but you can only simulate by using the developer's tool with the smartphone option active, where you can simulate the touch.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta charset="UTF-8">
<style>
#outerframe {
height: 310px;
width: 300px;
border: 2px solid red;
padding: 8px;
margin: auto;
overflow: scroll;
}
#scrollarea {
height: 300px;
width: 400px;
border: 1px dashed green;
padding: 16px;
}
input[type=range] {
appearance: none;
background: linear-gradient(90deg, #aaa, #ccf1ff 30%, #ccf1ff 70%, #aaa);
outline: none;
opacity: 0.7;
border-radius: 4px;
height: 14px;
width: 200px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) inset, 0 -5px 4px rgba(0, 0, 0, 0.5) inset;
vertical-align: middle;
margin: 16px;
}
input[type=text] {
width: 50px;
}
</style>
<title>Testing range in scroll</title>
</head>
<body>
<div id="outerframe">
<div id="scrollarea">
<input type="range" id="rangescroll">
<input type="text" value="50">
</div>
</div>
<script>
scrollarea.firstElementChild.addEventListener('input', evt => {
evt.target.nextElementSibling.value = evt.target.value;
})
</script>
</body>
</html>
EDIT:
FIX:
Oleg Barabanov, suggested to make the overflow: hidden while moving the input handle (add a class for that on touchstart and removing the class on touchend). While that works I thought about a more elegant solution. I remembered about event.preventDefault() and how it allows us to cancel browser handling of subsequent events. The idea was, if I can allow one event, the input event and block the rest (the scrolling event done by the browser automatically) then it could work.
This is the additional code I first tried for the input range:
document.querySelector('.scrollarea').firstElementChild.addEventListener("touchstart", (evt) =>
document.querySelector('.outerframe').classList.add("overflow-hidden");
evt.preventDefault();
});
It didn't work here (which is surprising for me as I successfully used that in the past to stop default events). But then I remembered that when I studied JS events there was another way to prevent default events and that was to return false for the event:
document.querySelector('.scrollarea').firstElementChild.addEventListener("touchstart", (evt) =>
document.querySelector('.outerframe').classList.add("overflow-hidden");
return false;
});
To be fair, that article mentions that return false would only work for when the event is configured as an attribute like ontouchstart. But I used with the addEventListener() method and it also worked.
I hope it helps more people in the future.
Maybe this is not the best solution, but it seems to work. Just using the touchstart and touchend events + css overflow:
scrollarea.firstElementChild.addEventListener("input", (evt) => {
evt.target.nextElementSibling.value = evt.target.value;
});
scrollarea.firstElementChild.addEventListener("touchstart", (evt) => {
outerframe.classList.add("overflow-hidden");
});
scrollarea.firstElementChild.addEventListener("touchend", (evt) => {
outerframe.classList.remove("overflow-hidden");
});
#outerframe {
height: 310px;
width: 300px;
border: 2px solid red;
padding: 8px;
margin: auto;
overflow: scroll;
}
#scrollarea {
height: 300px;
width: 400px;
border: 1px dashed green;
padding: 16px;
}
input[type=range] {
appearance: none;
background: linear-gradient(90deg, #aaa, #ccf1ff 30%, #ccf1ff 70%, #aaa);
outline: none;
opacity: 0.7;
border-radius: 4px;
height: 14px;
width: 200px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) inset, 0 -5px 4px rgba(0, 0, 0, 0.5) inset;
vertical-align: middle;
margin: 16px;
}
input[type=text] {
width: 50px;
}
.overflow-hidden {
overflow: hidden !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta charset="UTF-8">
<title>Testing range in scroll</title>
</head>
<body>
<div id="outerframe">
<div id="scrollarea">
<input type="range" id="rangescroll">
<input type="text" value="50">
</div>
</div>
</body>
</html>
It is not clear to me exactly why, but when you are in the mobile test view, disabling the height and width from #scrollarea in dev tools fixes the problem. The #scrollarea in the mobile view is handled by moving everything within the parameters.
Two other solutions, which avoid having to remove your parameters are setting position=fixed or position=absolute on #rangescroll.
If this is a problem with browser support, you can try online tools that can help in generating CSS code with cross browser support.
So I would recommend you can go here
Here is the code that was generated:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta charset="UTF-8">
<style>
#outerframe {
height: 310px;
width: 300px;
border: 2px solid red;
padding: 8px;
margin: auto;
overflow: scroll;
}
#scrollarea {
height: 300px;
width: 400px;
border: 1px dashed green;
padding: 16px;
}
input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: -webkit-gradient(linear, left top, right top, from(#aaa), color-stop(30%, #ccf1ff), color-stop(70%, #ccf1ff), to(#aaa));
background: -o-linear-gradient(left, #aaa, #ccf1ff 30%, #ccf1ff 70%, #aaa);
background: linear-gradient(90deg, #aaa, #ccf1ff 30%, #ccf1ff 70%, #aaa);
outline: none;
opacity: 0.7;
border-radius: 4px;
height: 14px;
width: 200px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) inset, 0 -5px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) inset, 0 -5px 4px rgba(0, 0, 0, 0.5) inset;
vertical-align: middle;
margin: 16px;
}
input[type=text] {
width: 50px;
}
</style>
<title>Testing range in scroll</title>
</head>
<body>
<div id="outerframe">
<div id="scrollarea">
<input type="range" id="rangescroll">
<input type="text" value="50">
</div>
</div>
<script>
scrollarea.firstElementChild.addEventListener('input', evt => {
evt.target.nextElementSibling.value = evt.target.value;
})
</script>
</body>
</html>
You can add the css property touch-action:manipulation; to your #outerframe to disable touch events from it when in smartphone mode
edit: I figured out that touch-action:manipulation; might not solve it but touch-action:none will but in expense of rendering overflow:scroll; useless in mobile
2nd edit: I figure out adding touch-action: pan-x; touch-action: pan-y instead of touch-action:none; cant still make your outer div scrollable in a certain way
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta charset="UTF-8">
<style>
#outerframe {
height: 310px;
width: 300px;
border: 2px solid red;
padding: 8px;
margin: auto;
overflow: scroll;
touch-action: pan-x;
touch-action: pan-y;
}
#scrollarea {
height: 300px;
width: 400px;
border: 1px dashed green;
padding: 16px;
touch-action: manipulation;
}
input[type=range] {
appearance: none;
background: linear-gradient(90deg, #aaa, #ccf1ff 30%, #ccf1ff 70%, #aaa);
outline: none;
opacity: 0.7;
border-radius: 4px;
height: 14px;
width: 200px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) inset, 0 -5px 4px rgba(0, 0, 0, 0.5) inset;
vertical-align: middle;
margin: 16px;
}
input[type=text] {
width: 50px;
}
</style>
<title>Testing range in scroll</title>
</head>
<body>
<div id="outerframe">
<div id="scrollarea">
<input type="range" id="rangescroll">
<input type="text" value="50">
</div>
</div>
<script>
scrollarea.firstElementChild.addEventListener('input', evt => {
evt.target.nextElementSibling.value = evt.target.value;
})
</script>
</body>
</html>
In mobile you drag to scroll up and down, as well left and right. If you would just disable the overflow-x on #outerframe you can fix your problem:
#outerframe {
height: 310px;
width: 300px;
border: 2px solid red;
padding: 8px;
margin: auto;
overflow-x: hidden;
}
#scrollarea {
height: 300px;
width: 400px;
border: 1px dashed green;
padding: 16px;
}
input[type=range] {
appearance: none;
background: linear-gradient(90deg, #aaa, #ccf1ff 30%, #ccf1ff 70%, #aaa);
outline: none;
opacity: 0.7;
border-radius: 4px;
height: 14px;
width: 200px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) inset, 0 -5px 4px rgba(0, 0, 0, 0.5) inset;
vertical-align: middle;
margin: 16px;
}
input[type=text] {
width: 50px;
}
<div id="outerframe">
<div id="scrollarea">
<input type="range" id="rangescroll">
<input type="text" value="50">
</div>
</div>
<script>
scrollarea.firstElementChild.addEventListener('input', evt => {
evt.target.nextElementSibling.value = evt.target.value;
})
</script>
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.
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
I'm using JQuery to load the contents of a text file into a div however when the content goes beyond the div no scroll bar appears.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/common.css">
<script src="JS/common.js"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>The Circuit</li>
<li>Gallery</li>
<li>Further Reading</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
<div id="tabContent5"></div>
</div>
</body>
</html>
CSS:
body {
background-color: #EEEEEE;
font-family: Arial,Helvetica;
font-size: small;
height: 100%;
margin: 100px auto 0;
width: 100%;
}
#tabs {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: -98px;
width: 100%;
}
#tabs li {
float: left;
margin: 0 -15px 0 0;
}
#tabs a {
border-bottom: 30px solid #3D3D3D;
border-right: 30px solid transparent;
color: #FFFFFF;
float: left;
height: 0;
line-height: 30px;
opacity: 0.3;
padding: 0 40px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
#tabs a:hover {
border-bottom-color: #2AC7E1;
opacity: 1;
}
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em;
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
.activeTab {
border-bottom-color: #3D3D3D !important;
opacity: 1 !important;
}
.img {
}
JQuery:
$('a[name="#tabContent2"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$("#tab5").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
$("#tabContent1").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
$("#tabContent5").hide();
});
How can I get the scroll bar to appear?
#tabs {
overflow: scroll;
}
overflow controls how content is hidden. If set to hidden it will be hidden with no scroll bars. You want scroll to add the appropriate scroll bar.
Overflow is visible but just it overflowed by padding:
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em 0 0 2em; /*<--change to this*/
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
Try to use the famous micro clearfix instead of overflow: auto;
/*The famous micro clearfix*/
.group:before,
.group:after,
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after,
.group:after {
clear: both;
}
.group,
.group {
*zoom: 1;
}
And for your jQuery, that can be a lot shorter and, arguable, more readable like this:
$('a[name="#tabContent2"]').click(function () {
$(this).parent().parent().find("a").removeClass("activeTab");
$(this).addClass('activeTab');
$("#content > div").hide();
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
});