I coded two 'one page websites' on codepen for a project (the second one is not finished, the nav needs a little more code to look proper).
Looking at my code there is not much difference, so I don't see why the second page looks rubbish on mobile devices?
I can scroll left to right and can't see the whole size of the page and not zoom out enough to do so.
Working First One
Not Working Second One
(Note: I used Bootstrap for these)
body {
font-family: Raleway;
background-image: no-repeat center center fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: #92b8db;
color: white;
display: block;
margin: 0;
}
h1 {
text-align: center;
font-size: 70px;
margin: 2% 0 3.5% 0;
text-transform: uppercase;
}
nav {
text-align: center;
display: inline-block;
margin: 25px;
float: none;
overflow: none;
}
li,
ul {
text-decoration: none;
display: inline-block;
margin: 5px 20px;
}
h2 {
margin: 25px 0 0 20%;
}
p {
font-size: 20px;
margin: 5px 10% 20px 10%;
text-align: justify;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1" , user-scalable=no>
<body background="http://static.tumblr.com/38d4fa35aa182890b82bb598a50c8d8b/hti7sqq/7h2orgi26/tumblr_static_4g8ybvq3e4ys8sk4sgowscko8.jpg">
<div class="container-fluid">
<div class="row">
<div class="col">
<h2>Heartcube</h2>
</div>
<div class="col">
</div>
<div class="col">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div class="container-fluid container">
<h1> Betti Bremm</h1>
<p>
We are giants...
</p>
</div>
</div>
</body>
The reason you can't "zoom" is because you have user-scalable set to "no" - if you remove that part you should be able to.
If you just leave the viewport meta at
meta name="viewport" content="width=device-width, initial-scale=1">
this should suffice.
The meta for the user-scalable is only set in the settings for the HTML on the site that doesn't work in your codepen (it doesn't seem to take into account the manual head meta settings in the codepen). Your bootstrap is also included twice in this codepen.
Hope this helps
Related
Header with logo
i want to align home, etc with the logo, but i think the logo is occupying all the space on top of the menu-headers and i dont know how to reduce it, i've already tried the margin-left or right and also padding but it doesnt help.
i also want to know if it is a bad practice to have negative CSS rules or if there is any bad practices in my code so far.
sorry for the bad english, i`m not a native
<!DOCTYPE html>
<html>
<head>
<title>Heloisa Antoniely │ Makeup</title>
<link rel="stylesheet" type="text/css" href="Makeup.css">
<meta charset="UTF-8">
<meta name="author" content="Thiago Marvin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="main-header">
<div class="Logo">
<img src="photos/Logo.png.png" alt="Makeup" class="center">
</div>
<div class="social">
</div>
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
</header>
<section>
</section>
</body>
</html>
body{
background-color: #137B77;
margin: 0;
padding: 0;
}
header{
background-color: #45a29e;
margin: 0;
padding:0;
justify-content: baseline;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
margin-bottom: -124px;
margin-top: -65px;
}
.main-header{
margin-top: 0px;
margin-bottom: 62px;
}
.header-menus{
padding-top: 0;
}
.header-menus ul li {
list-style: none;
color: #000000;
}
.header-menus ul li a{
color: #000000;
text-decoration:none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
Since div elements are block elements, they take all available horizontal space of the parent element, i.e. a complete "line".
See https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
I would recommend using display: flex on the .main-header class. By default the child elements will be arranged in a row (flex-direction: row).
The align-items property can be used to arrange the elements vertically.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.main-header {
display: flex;
align-items: center;
}
Demo: https://jsfiddle.net/u3gv6s7f/
Give the logo a width of x px. That will give it a set size. You can do width=100% and make sure you style the container div as a inline-block or use flex-box in order to set its size straight.
.main-header {
display: flex;
}
img {
width: 100%;
}
That should make every element inside the header display on a row.
Look more into flex-box in order to understand it well. https://flexboxfroggy.com/ is a good resource.
You can use flexbox in main div which wraps logo and links
.main-header{
margin-top: 0px;
margin-bottom: 62px;
display: flex;
justify-content: center; //you can do also space-between or space-evenly
align-items: center;
}
Just as i added position:absolute; to my h3 inside .panel class (which has a postion: relative;), everything starts to fall apart.
when i refresh i still get blank page , i tried to inspect my elements from dev tools, and when i decreased the viewport width, suddenly it appears from nowhere. Also i noticed that .panel's width is now 0, but how?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
display: flex;
max-width: 90vw;
}
.panel {
height: 80vh;
border-radius: 50px;
margin: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: flex 0.8s ease-in;
flex: .5;
cursor: pointer;
position: relative;
}
.panel h3 {
position: absolute;
font-size: 1.5rem;
bottom: 20px;
left: 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>Day-1 Expanding cards</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="container">
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1619994948937-ef1e758d46ca?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=890&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1621335819647-09d00a452430?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=668&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1615653051647-321e464edc86?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1606170034762-cbe66ccabbf8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1568056308658-aa380181da25?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1037&q=80');">
<h3>Some Heading</h3>
</div>
</div>
</body>
</html>
Try adding a width to your .panel class, with an actual value (not auto or a %). You have a set height, but height alone will not make the element take up any width on the page.
The reason this issue appeared when you changed .panel h3 elements to position: absolute is because it was these h3 elements that were giving .panel its width before. When they were switched to absolute, they were taken out of the flow of the document and their widths no longer impacted the .panel elements.
Exact fix : changed the max-width:90vw on the .container to width:90vw and this solved the issue.
This issue happened because, i didn't had the width property set, and hence the container gets a 0 width, and therefore, nothing is shown. Also Max-width pertains to a limitation, and not setting the width.
For some reason my html and css isn't taking up the entire width of the page, even though I set margin and padding to 0, and width to 100%. It's always worked before, but I have no idea why it isn't working this time. The only thing that has been implemented so far is the just the background and navbar. I have attached an image to demonstrate how it appears right now. Any help would be appreciated.
*{
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
font-family: sans-serif;
}
body{
overflow-x: hidden;
}
.container{
width: 100%;
height: 100vh;
background: #42455a;
}
.navbar ul{
display: inline-flex;
margin: 50px;
}
.navbar ul li{
list-style: none;
margin: 0px 20px;
color: #b2b1b1;
cursor: pointer;
}
.logo img{
width: 30px;
margin-top: -7px;
margin-right: 48px;
}
.active{
color: #19dafa !important;
}
<!DOCTYPE html>
<html>
<head>
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS File -->
<link rel="stylesheet" type="text/css" href="check.css">
<title>Webpage title</title>
</head>
<body>
<div class="container">
<div class="navbar">
<ul>
<!-- logo -->
<li class="logo"><img src=""></li>
<li class="active">Home</li>
<li>Services</li>
<li>Product</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You're using Bootstrap.css, which defines a max-width: 540px rule on any element with class="container" when the browser viewport width is wider than 576px:
To fix this, use a different class name other than container, or extend the .container rule in your own stylesheet to set max-width: none;.
But, in my frank opinion, the best solution is to not use Bootstrap.css and to instead take responsibility for styling your own website. I feel Bootstrap has gotten bigger and bigger over the years it takes just as much effort to "learn Bootstrap" as it does to learn how to write one's own base common stylesheet.
In my HTML page, I have some social media icons at the top of the page, and a logo that's supposed to be in the middle. But, after I added the icons, they're pushing the logo to the side a bit.
Here's an image of what's happening
The question mark symbol is supposed to be in the middle of the entire page (directly in between the "updates" and "archive" in the nav bar), but it's being pushed off. Is there a way I can make the logo in the center of the entire page?
In my HTML I have:
<img src="https://imgur.com/16OdDvD.png" class="sns-icon" id="ig">
<img src="https://imgur.com/nQ2aUYu.png" class="sns-icon" id="reddit">
<div class="center">
<img src="https://imgur.com/hQRzG5G.png" id="headerlg">
</div>
Then in my styles.css I have:
.center {
text-align: center;
}
#headerlg {
padding-top: 35px;
padding-bottom: 9px;
width: 80px;
position: relative;
}
.sns-icon {
width: 30px;
float: left;
margin-top: 13px;
margin-left: 13px;
padding: 1px;
}
I've also tried justify-content: center and margin: auto both of which didn't work
your source code didn't work for me, but here I write some code like yours, I solve your problem with flex box and add some visual style, I hope it's make sense to you.
.container {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.container>div {
width: 33%;
height: 20px;
background-color: rgb(216, 216, 216, 0.4);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML & CSS</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="social-media">
<span>instagram</span>
<span>twitter</span>
</div>
<div class="logo">
icon logo
</div>
<div class="put-nothing">
</div>
</div>
</body>
</html>
I just created 3 div 1 of them contain social media ,another contain logo , and last one left empty. all of them have same width in all device (mobile, tablet, laptop).
I want to create a fluid design with header (full-with), big image slideshow on the left and 4 images as sidebar.
I want to make the sidebar 100% height, with 4 images (which will act as buttons). The height should always be 100%, so no scroll. Width should automatically change when resizing browser.
But I couldn't get it done. Do you have any suggestion?
Fiddle
Thank you very much!
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/>
<style type="text/css">
body {
background-color: #fff;
padding: 0;
margin: 0;
font-family: "Droid Sans", sans-serif;
width: 100%;
}
div#links {
float: left;
}
div#rechts {
float: right;
display: block;
height: 90%;
background-color: grey;
}
div#rechts img {
height: 25%;
width: auto;
clear: both;
}
div#cat {
float: right;
clear: both;
}
header {
height:10%;
font-size: large;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<header id="header">header</header>
<div id="links">
Content left side
</div>
<div id="rechts">
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
</div>
</div>
</body>
</html>
Use bootstrap 2 or 3 for making fluid and responsive websites simple and easy to use once get hang of it you can pretty much do anything with bootstrap you can easily div them in to separate grids to do the way you would like.
CSS-Tricks is a great place to start more user friend forum also can search post your message in there but also show code sample what your trying to achieve