I have problem with text width on mobile devices on this website.
I need to make text full width.
I try make div 100%, 1000px, insert text in table, make body min-width...
do you want to justify text on the screen?
You can use text-align CSS property to center.
like this
.center-wrapper{
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}
for below HTML:
<div class="center-wrapper">
<div data-role="button">button text</div>
</div>
or set margins of the screen like:
.center-wrapper{
margin: 0 auto;
}
It seems to me your problem has to do with wrong viewport declaration.
You should use
<meta name="viewport" content="width=device-width, initial-scale=1" />
instead of
<meta name="viewport" content="width=1024">
Because you want to make sure the viewport gets adjusted correctly according to the pixel ratio of every mobile device. See also https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag for more detailed information about usage of viewport
Related
Below is a simple HTML page that renders very differently in Chrome and Firefox. It looks like Chrome has a bug. I tried hard but could not find a workaround to make it work in Chrome. My best attempt was wrapping the img in a div with a height, but it does not work nicely when the size of the picture is limited by the width of the browser. Could you suggest a workaround to make it work in Chrome?
To clarify: in Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain. How can I make it work in Chrome?
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Magic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div style="display:flex;flex-direction:column;max-height:100vh">
<h1>Title of the page that works in Firefox but not Chrome</h1>
<img alt="goban" style="margin:auto;height:auto;width:auto;max-height:100%;max-width:100%;" src="https://www.schaakengo.nl/images/productimages/big/goban-13x13-licht-2-.jpg">
</img>
<p>This paragraph should be visible, together with the image and the title.</p>
</div>
<h2>This does not have to fit vertically in the page</h2>
<p>This works in Firefox but not Chrome. In Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain.
How can I make it work in Chrome?</p>
</body>
</html>
I don't think it will work with an image tag, but you can apply it as a background-image to a DIV and use background-size: contain; (to make sure the whole image is always displayed without anything being cut off) and flex-grow: 1; (to allow the empty container to gain height) on it:
body {
margin: 0;
}
.outer_div {
display: flex;
flex-direction: column;
height: 100vh;
}
.img_container {
background: url(https://www.schaakengo.nl/images/productimages/big/goban-13x13-licht-2-.jpg) center center no-repeat;
background-size: contain;
flex-grow: 1;
}
<div class="outer_div">
<h1>Title of the page that works in Firefox but not Chrome</h1>
<div class="img_container"></div>
<p>This paragraph should be visible, together with the image and the title.</p>
</div>
<h2>This does not have to fit vertically in the page</h2>
<p>This works in Firefox but not Chrome. In Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain.
How can I make it work in Chrome?</p>
I must be missing something obvious, but here it comes... I just want to establish a narrow viewport width (320px) on my browser to check / design the web layout for a mobile phone display. Why is it that if set a viewport width with the meta tag, the browser doesn't respect it? This is what I do:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320px" />
<style>
.content {
width: 100vw;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
<p> Hello, this is the 'content' </p>
</div>
</body>
</html>
It just doesn't matter what size I put in the tag, it just seems to use the native display size. Can anybody tell me what the problem is and how to actually do it?
You don't need to set a viewport to check mobile compatibility. Just, click F + 12 keys in your browser chrome, and click on the mobile devices icon. This way you can select any viewport profile and check your design. See the image below:
I'm using Semantic-UI with React JS.
This is my top-most html:
<head>
<title>Title</title>
</head>
<body>
<div id="render-target" class="ui fluid container"></div>
</body>
As you can see I am using a fluid ui container, which means I want the container to be as wide as the browser....
This works at a bigger browser size.
However, for some reason, if I reduce the size of the browser, at a certain breakpoint the container gets some margin on both sides automatically.
What is the reason for this and how do I fix this so that it always is as wide as the browser?
Thank you very much.
.ui.fluid.container {
margin-left: 0 !important;
margin-right: 0 !important;
}
This made it work for me....
I have two layouts, but they are conceptually the same.
One is a div containing an image. The other is two floating div elements that takes half with of their parent div at the left and right respectively containing an image each. Their parent div size and proportion depends of the body size and proportions and it is unknow until display time, so I need to specify it by percentage and not by constant width or height.
In both cases I need the maximum width or height while keeping aspect ratio and not overflowing the parent div, so image/s display as bigger as possible while keeping proportion.
I know how to keep proportions with max height or with, but not with both, so there is overflow. I also know how to accomplish this with Javascript, but I'm trying to avoid scripts in my layout and I want to handle that in css.
I haven't see anything like that in the net, nor googling gave me a clue about it, so I even doubt if this is actually possible in css.
Any solution will be greatly appreciated.
EDIT :
OK, I figured out how to do it. The deal was setting up image max-height and max-width to 100%. However I am facing another problem, so I post the layout if someone doing what I was trying to do finds it useful, and I remake the question to focus in the new problem.
Here's the layout. It will keep images aspect ration to the biggest possible size.
index.html
<html>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header"></div>
<div id="pageleft" class="page">
<img src="img/1.jpg">
</div>
<div id="pageright" class="page">
<img src="img/2.jpg">
</div>
</body>
</html>
style.css
html, body {
height: 100%;
overflow:hidden;
padding:0px;
margin:0px;
}
.header{
background-color:blue;
width:100%;
height:2em;
}
.page{
width:50%;
height:100%;
position:relative;
}
#pageright{
float:right;
background-color:green;
}
#pageleft{
float:left;
background-color:yellow;
}
.page > img{
position:absolute;
margin:auto;
top:0;
bottom:0;
max-height:100%;
max-width:100%;
}
#pageleft > img {
right:0;
}
#pageright > img {
left:0;
}
Note 1: Tested in Chrome and Firefox both desktop (resizing the window to any size/propotion) and mobile (portrait and landscape).
Note 2: I'm using A paper cut proportions for the images, but should work with any image size and proportions, even when both images have different aspect ratio.
The problem is that my header height is 2em and that is what the .page div are overflowing. Does anyone know a way to fix that?
Thanks in advance.
When I shrink the browser width I expect the header div to shrink along with the browser and take up the entire width of the page. Instead the div stops at the browser width and then there is blank space to the right and a horizontal scroll bar. This seems to be a problem with the way I'm using bootstrap but I can't figure it out. Any help appreciated
I'm using the latest minified bootstrap css in my project and have completely simplified my layout below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<div class="row">
<div class="header">
<div class="container">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</body>
</html>
css:
body {
background-color: #CDE0E4;
width: 100%;
}
.header {
position: relative;
height:120px;
background-color:#CDE0E4;
box-shadow: 0 0px 15px #272727;
}
Thanks
What you need is fluid layout (see the docs). This term means that your content takes most available width and is resized when browser window is resized. In this case you should use .container-fluid and .row-fluid instead of their unsuffixed versions.
But you are misusing some of Bootstrap's classes.
.row
Is used when you want to create a multi-column layout. For this you have .span* classes to use inside it (see the docs for examples).
.container
Is used when you want your content to have a white space on the sides (it will be 20px for .container-fluid and maximum available for .container).
.header
If you are using HTML5 (which you do by declaring <!doctype html>), why not to use <header> instead of <div class="header">?
<div class="container">
should come at the top. Row is nested inside container and finally the column is nested inside row. You have reversed the order. That is one problem with your code.