I have a problem with the button that changes the size of the mobile.
Can I somehow prevent that? I want to get the same look at mobile as on pc.
Button size change example.
The code that I use is:
.container8 {
position: relative;
width: 100%;
max-width: 100%;
}
.container8 img2 {
width: 100%;
height: 100%;
}
.container8 .xxx8 {
position: absolute;
top: 73%;
left: 72%;
background-color: #e20612;
color: black;
font-size: 18px;
padding: 1% 3.5%;
border: none;
cursor: pointer;
border-radius: 10%;
text-align: center;
}
.xxx8:hover {
background-color: #b3ecff
}
.container8 .btn:hover {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container8">
<img src="http://www.scientini.com/application/files/9315/2361/6488/11.png" alt="Snow" width="100%">
<button class="xxx8">FORM</button>
</div>
</body>
</html>
I see in your code that the size of FORM button depends on this button text size. So if you want to have the same font size (and also the same responsive button) on each device set the vw or vh in font size ex. font-size: 2vw;
.container8 .xxx8 {
position: absolute;
top: 73%;
left: 72%;
background-color: #e20612;
color: black;
font-size: 2vw;
padding: 1% 3.5%;
border: none;
cursor: pointer;
border-radius: 10%;
text-align: center;
}
Look in JSFiddle if it is what you want.
vw is device width (responsive)
vh is device height (responsive)
if you set a px size for your button, it will be the same size for each device and screens
.xxx8 {
height: 50px;
width: 100px;
}
Give a fixed width and height to your button, also you should take a look at what Responsive is.
.xxx8{
display: inline-block;
height: 50px;
width: 100px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
remove this meta from HTML file
You could try adding !important at the end of the css which has the size of the button.
Or you can do CSS media queries like this.
#media (max-width: 600px (you need to know on which width your are getting the trouble)) {
.class_of_button{
width: your width;
height: your height;
}
Related
I can't fit my page to resolution of screen. I have 1920x1080, image is 1920 px width and it is going out of a window. link with code and images: https://mega.nz/file/rPJB2aCZ#OY7vW1yFZ-d0Fb73UvYvw8D-1NEnSmSV5XSA-Dw0LPU index1.html and style1.css are unnecessery.
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/style.css">
<style>
</style>
</head>
<body>
<div class="container1">
<img style="width: 100%" src="../img/Zrzut ekranu 2021-10-18 o 15.21.01.png">
<p class="text1">
<b>Opanuj stres i przejmij kontrolę<br>
w biznesie i życiu prywatnym!</b>
</p>
<p class="text2">
<b>Poznaj techniki koherencji w trakcie spotkań<br>
jeden na jeden i zapanuj nad swoim stresem.</b>
</p>
<button class="button1">
<b>Zapisz się na kurs</b>
</button>
<button class="button2">
<b>O mnie</b>
</button>
</div>
</body>
</html>
.text1 {
position: relative;
font-family: Ubuntu;
font-size: 70px;
margin: 0;
color: white;
}
.text2 {
position: relative;
font-family: Ubuntu;
font-size: 25px;
margin: 0;
color: white;
}
.button1 {
position: relative;
background-color: #D32A34;
color: white;
border: none;
width: 239px;
height: 71px;
font-size: 20px;
}
.button2 {
position: relative;
border: solid #D32A34;
color: white;
background-color: transparent;
width: 239px;
height: 71px;
font-size: 20px;
}
normal image responsive
here a online exercise, if you want to learn how to make an image responsive: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive
.container1 img {
max-width: 100%;
height: auto;
}
if you want an image as a background
use this in your img selector
.container1 img {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
the height is 100vh so 100% of all height of the device, also if the parent his width is less height.
the same with 100vw
object-fit make the image look good on all device, to matter the aspect ratio of the device
position: fixed is for make the image like a background
z-index for making the image go behind everything
.container1 img {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.text1 {
position: relative;
font-family: Ubuntu;
font-size: 70px;
margin: 0;
color: white;
}
.text2 {
position: relative;
font-family: Ubuntu;
font-size: 25px;
margin: 0;
color: white;
}
.button1 {
position: relative;
background-color: #D32A34;
color: white;
border: none;
width: 239px;
height: 71px;
font-size: 20px;
}
.button2 {
position: relative;
border: solid #D32A34;
color: white;
background-color: transparent;
width: 239px;
height: 71px;
font-size: 20px;
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container1">
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg">
<!-- text 1 -->
<p class="text1">
<b>Opanuj stres i przejmij kontrolę
<br>
w biznesie i życiu prywatnym!
</b>
</p>
<!-- text 2 -->
<p class="text2">
<b>Poznaj techniki koherencji w trakcie spotkań
<br>
jeden na jeden i zapanuj nad swoim stresem.
</b>
</p>
<!-- button 1 -->
<button class="button1">
<b>Zapisz się na kurs</b>
</button>
<!-- buttton 2 -->
<button class="button2">
<b>O mnie</b>
</button>
</div>
</body>
</html>
Try changing 'width: 100%' to 'width: 100vw' (which means viewport width)
At first you should style your .container1 or body and give it a width of 100% or 100vw. Pixels doesn't work probably because some width of the screen is reserved for scroll. Pozdro
if you use 100vw(view width) instead 100% for your img and set all margin and padding to 0, like that:
* {
margin: 0;
padding: 0;
}
Use this style into your stylesheet to remove the spacing between the image and box-sizing "body {padding:0;margin:0;} "
I have a fixed banner at the bottom of my website. Here is the styling for it
#mobile-cookie-policy {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
text-align: center;
background-color: #f7f7f7;
border-top: 1px solid #ddd;
z-index: 1;
padding-bottom: 10px;
}
#mobile-cookie-policy p {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
}
#mobile-cookie-policy span {
cursor: pointer;
padding: 10px 20px;
display: block;
}
And the element itself
<div id="mobile-cookie-policy">
<span onclick="hideDiv('mobile-cookie-policy')" id="mobile-cookie-close">✕</span>
<p>By using our website you are <br>agreeing to our use of cookies</p>
</div>
For some reason, on Firefox Android the fixed banner doesn't work it and jumps all over the place. Its default position is also slightly out of view. I can't work out why.
Here is a demonstration: https://imgur.com/a/FVsjt5k
EDIT: Curiously, I have discovered that it works on Firefox when the toolbar is set to be on the bottom, but not when it's on the top.
EDIT2: I have tried removing every other element on the page one by one, but it didn't help in any case.
EDIT3: I have also discovered that disabling "scroll to hide toolbar" makes it function as intended.
EDIT4: I am having the same issue with this simple website
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset="utf-8">
<title></title>
<style>
#main {
height: 3000px;
}
#fixed {
background-color: red;
bottom: 0;
position: fixed;
width: 100%;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
</div>
<div id="fixed">
</div>
</body>
</html>
What I'm trying to accomplish is on mobile I want my header to have a 3% margin on the left and a 3% margin on the right. I guess you can say what I have done has worked but its creating a side scroll bar.
Here is my code.
\
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic);
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
header {
width: 100%;
height: 64px;
background-color: #ECEFF1;
}
.content {
height: auto;
margin: auto;
width: 1100px;
overflow: hidden;
}
.logo {
float: left;
width: 150px;
height: 40px;
margin-top: 12px;
border-radius: 4px;
background-color: white;
}
.btn {
float: right;
width: 160px;
height: 40px;
margin-top: 12px;
border-radius: 4px;
background-color: #4285f4;
}
#media only screen and (max-width:1110px) {
.header {
width: 100%;
}
.content {
width: 100%;
margin-left: 3%;
margin-right: 3%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="content">
<div class="logo"></div>
<div class="btn"></div>
</div>
</header>
</body>
</html>
I've been dealing with this for quite some time now and can't seem to figure out why the scroll bar is there. I'm sure it's something small and I'm just overlooking it.
Thanks in advance !
Try changing width: 100%; to width: auto; for .content in the media query.
The reason is 100% + 3% + 3% > 100% total width, whereas auto will calculate the available space automatically.
Add the attribute box-sizing:border-box; to your content div and it will fix the problem.
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Link to w3 box sizing explanation: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I have a small problem. The webpage I'm working on has three areas:
On the left a navigation, which should always be on the left side
A content area in the middle, which should always be in the middle of the browser
The logo area on the right side, which should always be in the top right corner
Here's the code I have right now:
CSS
html, body
{
height: 100%;
min-height:100%;
padding: 0em;
margin: 0em;
}
body
{
font-family: Segoe UI, Arial;
font-size: 12px;
color: #616a71;
line-height: 15px;
letter-spacing: 0.5px;
overflow-y: scroll;
background-color: #CCC;
}
div#navigation
{
position: absolute;
float: left;
width: 220px;
left: 5px;
top: 70px;
z-index: 2;
padding-bottom: 50px;
background-color: red;
}
div#content
{
position: relative;
width: 1014px;
margin: 0 auto;
top: 70px;
padding: 10px;
background-color: #f6f6f3;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
border-radius: 2px;
line-height: 20px;
}
div#right
{
position: absolute;
width: 258px;
right: 0;
top: 0;
background-color: green;
}
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>header</title>
<link href="/style/test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="navigation">
nav
</div>
<div id="content">
content
</div>
<div id="right">
logo
</div>
</body>
</html>
Now, when I resize the browser, the content area goes behind the navigation are. What I want to achieve, is that when there is too little space to display the navigation and content area side by side the horizontal scrollbar of the browser should appear.
By using the CSS media queries as the ones specifies below
#media (max-width: 600px) {
// Your code goes here
}
You can specify the CSS to be used for these widths. Change the width accordingly
Try to give the width of divs as %.
div#navigation
{
width: 20%;
}
div#content
{
width: 60%;
}
div#right
{
width: 20%;
}
and float them all to left.
I know that it's a newbie question, but if you could give me a hand and tell me what I'm doing wrong I'd really appreciate that:
While I was experimenting with HTML and CSS I decided to create a page with a fixed size that should be centered on the screen. To do so I decided to place the [body] tag by making its position relative and move it by writing:
position: absolute;
padding: 1em;
width: 960px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
Hovever it didn't worked quite as expected, and this is the result I'm getting:
I was expecting to see the yellow box perfectly centered both horizontally and vertically, but instead I see that it's slightly off-center.
I tried to load the page on Safari, Firefox and Chrome and I'm getting the same results so as I already suspected I know that it's my fault :-)
Could you help me by explaining what I did wrong ?
Thank you very much
This is the complete HTML+CSS code of the page I have written:
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="utf-8">
<style>
html, body {
padding: 0;
margin: 0;
}
html {
background-color: red;
width: 100%;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
}
</style>
</head>
<body>
This is my website
</body>
</html>
That's because of the padding.
If you set the padding of the body to 0, it works (tested).
If you need a padding, add an internal 100% width div inside your body and give this internal div a padding.
Try this:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="utf-8">
</head>
<body>
This is my website
</body>
</html>
CSS:
html, body {
padding: 0;
margin: 0;
}
html {
background-color: red;
width: 100%;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
margin:auto;
margin-top: -300px;
}
JsFiddle: http://jsfiddle.net/qecwx/
The margin-left and margin-top should have -ve half values for width and height respectively:
margin-left: /* minus half of width */
margin-top: /* minus half of height */
You need to put in appropriate values.
In the container, you can also center using:
margin:0 auto;
provided you have already specified width too
Just messing around with it for a few minutes and this is what I came up with that seems to fit your needs:
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
position: relative;
margin: 0 auto;
margin-top: 10%;
}
All I did was remove the margin-left: and did a margin: 0 auto; to align the left and right sides. I then set the margin-top: 10%; to get the top and bottom centered. Also I set the positioning to relative. Hope that this helps.
Basically, you want to have the margins on your body tag set to auto like this
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
to center the body vertically takes a lot more work.