I'm creating a website that is all one page. However, the top of the page has a div that takes up 100% of the screen height to create a full page effect. Everything is working fine, but on mobile, any text that is in the 100% height div is decreasing in font size. I posted this question before, however, I've been doing much more research this time.
Here is the code that I've written:
h1{
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
html {
height: 100%;
min-height: 100%;
}
body {
background: #1A3742;
font-family: 'Source Sans Pro', sans-serif;
color: white;
margin: auto 100px;
height: 100%;
}
#header {
background: gray;
padding: 28px 0 26px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
}
#top{
text-align: center;
height: 100%;
}
#home-content{
position: relative;
top: 50%;
transform: translateY(-50%);
}
a[href="#top"] {
margin-left:100px;
margin-right:50px;
vertical-align: middle;
text-decoration: none;
font-weight: bold;
}
a img{
vertical-align:middle;
}
.content {
margin-left:75px;
margin-top:25px;
overflow: hidden;
}
.content p{
margin-top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
Name
<a href="">
<img src="" alt="img" height="24" width="24">
</a>
</header>
<div id="top">
<div id = "home-content">
<h1>Top</h1>
<h2>Sub title</h2>
<p>
This text does not scale at all.
</p>
</div>
</div>
<div id="section1">
<h1>Section 1</h1>
<div class = "content">
<p>
This scales with the screen.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>
Here is an example using Chrome Device Mode with a Galaxy S5. Note, I scrolled down a bit so you can see the text on the landing section and the text for Section 1.
The font size for Top should be the same as the font size for Section 1.
If I remove the line in the #top:
height: 100%;
The font size does not change for the top portion:
I know that I'm using the default font sizes but I wouldn't expect that to cause issues. Using Chrome Inspector here are the font sizes:
HTML - 16px
Body - 16px
Div id=top - 16px
h1 (inside #top) - 32px
Div id=section1 - 16px
h1 (inside #section1) - 42.6667px
The font size for h1 is 2em. Therefore, the 32px for Top make sense, however, the 42.6667px does not. I do not have this issue on my laptop using any web browser, just mobile. I actually prefer the 42.6667px on mobile as it make it more eligible. However, I want the font sizes to match.
Because the #top div's font size is fine when I removed the div height=100%, I decided I could create the same full page effect using jQuery and margins.
var winHeight = $(window).height();
var topHeight = $('#top').outerHeight(true);
$('#top').css({
'marginTop':(winHeight/2)-topHeight
,'marginBottom':(winHeight/2)//-topHeight
});
However, I would really prefer not to do it this way.
So, is there a way I can have the #top font size match the #section1 font size?
You're making a responsive website but you haven't configured the viewport. Great link here about it but essentially:
Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen.
So with your 100% height and Chrome's device mode rendering that height as a lot bigger than it is, you got the small text.
Adding the following to the head will make your site display properly on a mobile device:
<meta name="viewport" content="width=device-width, initial-scale=1" />
However, you'll need to make some changes as your 100px margin either side on your body squishes your content into a slim column.
Related
The image and text of this bootstrap card are supposed to be side by side, with the combo title + text centralized in relation to the image. But they are somewhat above the image.
Image of how it looks:
HTML:
<div class="card bg-transparent border-0 text-white mb-3" >
<div class="row g-0">
<div class="col-md-6">
<img src="../assets/images/cp/sobre-cid-1.jpg" class="img-fluid rounded-start img-esq" alt="cid-1">
</div>
<div class="col-md-6">
<div class="card-body">
<h3 class="card-title">TITLE</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
CSS:
.img-fluid.rounded-start {
height: calc(120px + 10vw);
width: 90vw;
object-fit: cover;
}
.img-esq {
border-radius: 0px 30px 30px 0px;
}
.img-dir {
border-radius: 30px 0px 0px 30px;
}
.card-title {
font-family: 'Martel';
font-size: 22px;
padding: 20px;
text-align: left;
font-weight: 600;
}
.card-title-right {
font-family: 'Martel';
font-size: 22px;
padding: 20px;
text-align: right;
font-weight: 600;
}
.card-text {
font-family: 'Martel';
font-size: 14px;
padding-left: 20px;
padding-right: 30px;
text-align: left;
}
.card-text-right {
font-family: 'Martel';
font-size: 14px;
padding-left: 30px;
padding-right: 20px;
text-align: right;
}
Additional info: The card is inside a div that gets the entire page, this is it's CSS:
.bg {
background-image: url(../images/cp/fundo.png);
background-position: center;
background-repeat: repeat-y;
background-size: cover;
margin-top: 0px;
text-align: center;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
}
I mostly looked for margins and paddings. I tried changing padding-top and margin-top to zero, I even looked for this in the item above the bootstrap card, but nothing helped, there was only a br tag between the item above the card and the card itself. I also looked for a margin in the card and everything seems right.
EDIT 1:
I added to .row a display: flex and align-items:center, it is not perfectly centered but maybe I can use it, but there's still a big space in between each card:
EDIT 2:
I added to .row a margin-top: -80px and now the space between cards is good. Not the perfect solution I think but works for now.
To make the text vertically centered in relation to the image, I added margin-top: 60px to the cards' titles, and it pushed them down. Again, not perfect but works for now.
EDIT 3:
I fixed it. The problem was in a part of the CSS code I didn't know influenced the whole page. It was like this:
img {
width: 70%;
height: auto;
margin-top: 15%;
}
I thought it would only influence the class that was above it. Turns out, it influenced all the img tags.
I found out by deleting part by part of the CSS code in Codepen.
The problem may be caused by the calc() function in the height property for the img-fluid.rounded-start class. This function calculates the height of the image based on the size of the viewport, which could be causing the image to be larger or smaller than expected. Try to set fixed values to it.
Also, you can try and use align-items: center in the .bg class, this should align the elements at the center of the div.
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 2 years ago.
I have
html {
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
body {
padding: 0;
margin: 0;
height: 100%;
box-sizing: border-box;
background-color: $bgcolor;
}
.main-content {
height: 95%;
}
header {
background-color: $header-bg;
color: $header-text;
text-align: left;
padding: 20px;
height: 5%;
display: flex;
}
and I have a div with class main-content and a header.
For some weird reason I'm seeing extra whitespace at the bottom of my page. (header has a height of 5% - hence giving main-content height of 95%), any ideas why there's extra space there and how I can remove it??
html is
<body>
<%- include ('../partials/header.ejs') %>
<div class="main-content">
<%- body %>
</div>
</body>
header is -
<header>
<a id="aaa" href="/">AAA</a>
<nav id="topnav">
---
</nav>
</header>
Please try the snippet of code I am sharing with you in this response. I added the height: 100vh; corresponding to the 100% of the viewport height, applied to both html and body to keep the consistency of the height to the max of the screen since they don't have a default size. Also, since it is kind of hard to calculate the max width of any screen and subtract the 20px of padding that you have on the HEADER tag in each screen scenario, an overflow:hidden rule has been added to this element.
I also added the P tag to test the div with the class .main-content with some actual content on it to test the whole site with some real content on it.
I am assuming you are using some JavaScript HTML Markup template generator language tool such as EJS to create this page, hence I have temporarily replaced <%- body %> and <%- include ('../partials/header.ejs') %> blocks with real content to see the end result. Don't forget about placing them back instead of my hard-coded content, please.
I certainly hope this helps. Cheers, champion!
html {
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
padding: 0;
}
body {
padding: 0;
margin: 0;
height: 100vh;
min-height: 100%;
color:#b2d8d8;
box-sizing: border-box;
background-color: #004c4c;
overflow: hidden;
}
header {
background-color: #189ad3;
color: #f9fafc;
text-align: left;
height: 5%;
padding: 20px;
display: flex;
width: 100%;
position:relative;
}
.main-content {
height: 100%;
}
p {
padding: 10px;
text-align: justify;
text-justify: inter-word;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 BoilerPlate - Alvison Hunter</title>
<meta name="description" content="HTML5 BoilerPlate - Alvison Hunter">
<meta name="author" content="https://alvisonhunter.com/">
<link rel="stylesheet" href="css/styles.css?v=1.0"> </head>
<body>
<header> <a id="aaa" href="/">AAA</a>
<nav id="topnav"> --- </nav>
</header>
<div class="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
Background
I have a div with two columns. In column A, there will be a div with an "About Me" section. This is height X. In column B will be another image of a map. This is height Y. X is not equal to Y.
I am making both columns (combined) = to 100vw. Each column is defined as 50%.
(I can calculate the height of the map in column B with the following math (which can be seen more clearly in the linked Jfiddle): Image is 350x600px. If 350px = 50%, then 600px = ~171%. 171 / 2 = 85.5% so the following code snippet should give the correct transform value:
margin-top: 85.5%;
transform: translateY(-50%);)
Objective
I would like the column height to adjust to the height of the tallest element. The tallest element will most likely always be in column B. I would like the div in column A to sit halfway down the page. However, if I should ever change the order and want to put something taller in column A than in column B, it would be really great to have a fallback so that the element in column B repositions itself to become vertically centred. (But I can live without that and do it manually should I need to.)
Problem
Column heights aren't behaving themselves. The height of column A (shown in dark green) is higher than that of column B, even though the element in A is shorter.
Jfiddle
http://jsfiddle.net/ubjo1s3y/28/
(With nice bright div colours)
Code
css:
.column {
margin: -5px 0px 30px 0px;
float: left;
width: 50%;
height: auto;
background-color: green;
}
.row:after {
background-color: pink;
content: "";
display: table;
clear: both;
height: 0;
}
#aboutmecontainer {
background-color: aqua;
width: 90%;
float: left;
padding: 0px 5% 0px 5%;
margin-top: 85.5%;
transform: translateY(-50%);
}
#facephoto {
background-color: red;
float: left;
width: 130px;
margin: 0px 0px 10px 50%;
transform: translateX(-50%);
}
#aboutmetext {
background-color: yellow;
float: left;
width: 100%;
height: auto;
}
#map {
background-color: yellowgreen;
float: left;
width: 90%;
padding: 0px 5% 0px 5%;
}
html:
<div class="row">
<div class="column">
<!-- container for round face photo -->
<div id="aboutmecontainer">
<div id="facephoto">
<!-- photo -->
<img src="http://via.placeholder.com/200x200" alt="Face" style="height: 100%; width: 100%; object-fit: contain;" />
</div>
<!-- container for text underneath face photo -->
<div id="aboutmetext"><h3 style="color: #000000;">About Me</h3><p></p><h5 style="color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</h5>
</div>
</div>
</div>
<div class="column">
<!-- div for map to right of "about me" section -->
<div id="map">
<!-- map picture can be edited in photoshop to add new countries -->
<img src="http://via.placeholder.com/350x600" alt="Map" style="width: 100%; height: 100%; object-fit: contain;">
</div>
</div>
</div>
First of all, I would definitely recommend learning how to use flexbox.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox.
Additionally, using floats in this situation is going to ruin the flow of the dom. There are situations where using floats can work, but it removes the targeted element from the regular flow of the dom and will always cause you grief if you don't know how to use floats.
Here is a revised jsfiddle that does not use flex. You want to set .column's display to inline-block and put font-size: 0 on .row (removing white-space). And remove all of your floats.
JSFiddle
Have you looked into Flexbox? It drastically simplifies this old height problem.
See this fiddle :
http://jsfiddle.net/uy2pqbkL/
Everything else is the same except the new properties added to your .row class.
.row {
display:flex;
align-items:center;
}
I have a simple page with a navbar and a homepage. The navbar is fixed and the homepage takes up 100% of the screen. The viewer then scrolls down from the homepage to view the rest of the web content.
I'm having an issue with the font not scaling when viewing on a mobile device or devices with smaller screen sizes. I believe this is due to me changing the navbar to take up 100% width and for the homepage to be taking up 100% height. The text under section1 scales correctly (the font gets bigger when the screen is smaller).
How can I have the homepage and the navbar increase in font?
h1{
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
html {
height: 100%;
min-height: 100%;
}
body {
background: #1A3742;
font-family: 'Source Sans Pro', sans-serif;
color: white;
margin: auto 100px;
height: 100%;
}
#header {
background: gray;
padding: 28px 0 26px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
}
#top{
text-align: center;
height: 100%;
}
#home-content{
position: relative;
top: 50%;
transform: translateY(-50%);
}
a[href="#top"] {
margin-left:100px;
margin-right:50px;
vertical-align: middle;
text-decoration: none;
font-weight: bold;
}
a img{
vertical-align:middle;
}
.content {
margin-left:75px;
margin-top:25px;
overflow: hidden;
}
.content p{
margin-top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
Name
<a href="">
<img src="" alt="img" height="24" width="24">
</a>
</header>
<div id="top">
<div id = "home-content">
<h1>Top</h1>
<h2>Sub title</h2>
<p>
This text does not scale at all.
</p>
</div>
</div>
<div id="section1">
<h1>Section 1</h1>
<div class = "content">
<p>
This scales with the screen.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>
Here is an example on mobile that shows the top text not scaling, but the section1 scaling correctly.
That is a Galaxy S5 in google Chrome. The text in the homepage/top portion and navbar should be scaling similar to the way the section1 text does.
How can I fix it so everything scales to the screen?
First, none of it is scaling. It's applying browser defaults as you've not set any font-size in the css provided. You can test it in the web inspector (remember to reload the page after activating it).
You can use vh (view height) or or vw (view width) as percentage messure for the font.
use media queries to adjust according to screen size
ex:
#media screen and (max-width:1000px){
#top{
font-size : 40px; /change it to whatever you need/
}
}
change the max-width accordingly to manage perfectly for every screen
for more information on media queries
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
As far as I can tell, it is not possible to place a CSS background image 1em from the right border of any block, neither is it possible to place a image 1em from the bottom.
The following code places the background image 1em from the left and 2em from the top.
<div class="foo" style="background: url('bar.png') no-repeat 1em 2em">
Some text here
</div>
Is there any way in CSS to specify that the background image should be "this far from the right edge" if the size of the box is dynamic and assuming that you cannot change the HTML?
(Percentages won't work, since the box can change size)
If this is not possible, what is the smallest amount of change you need to make to the HTML?
This is the workaround I came up with:
<style>
div.background
{
float: right;
background: url('bar.png') no-repeat top left;
margin-right: 1em;
width: 16px;
height: 16px;
}
</style>
<div class="foo">
<div class="background" style=""> </div>
Some text here
</div>
The CSS3 background-position spec allows you to change the anchor point from the top left to anything you want. For example, the following will set the lower bottom corner of the image 1em from the right and 2px from the bottom:
background-position: right 1em bottom 2px;
Confirmed to work in:
IE9/10, Firefox 13+, Chrome 26+, Opera 11+, Seamonkey 2.14+, Lunascape 6.8.0
As of April 2013, only IE6-8 and some fringe browsers lack support.
Here's a test page: http://jsbin.com/osojuz/1/edit
Elements with position: absolute; can be positioned by their right edge.
So, if you don't mind a minor change to the html, do this:
<div id="the-box">
<img id="the-box-bg" src="bar.png" />
Text text text text....
</div>
(...)
#the-box {
position: relative;
}
#the-box-bg {
position: absolute;
right: 1em;
z-index: -1;
}
You could of course also use absolute positioning of a second div, with a repeating background. But then you would have to set the size of the (inner) div in CSS.
You could try something like this:
<style type="text/css" media="screen">
#outer {
position: relative;
top: -1em;
left: -1em;
margin: 1em 0 0 1em;
outline: thin solid #F00;
background: url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) no-repeat 100% 100%;
}
#inner {
outline: thin solid #0F0;
position: relative;
top: 1em;
left: 1em;
}
</style>
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Edit: Looking forward to CSS 3 background-position.
After some research the actual x pixel length of the background position is always counted from the left side of the element. The only way to make this work (without using other elements) would be to use javascript, calculate the left length given the elements width:
var rightMargin = "10"; // in pixels
var imageWidth = "16";
var left = element.style.clientWidth - imageWidth - rightMargin;
element.style.backgroundPosition = "0px " + left + "px";