I would like to make only a part of a HTML page responsive to certain width leaving all the rest responsive to the browser size.
Example: In a web page, the user can design grids with text and images. The user can change the width of the entire layout. So, when the user changes the width of the layout of a design, only that layout becomes responsive set to the width chosen by the user.
In other words, the part of the design becomes responsive to the width set by the user while the rest of the web pages stay responsive to the browser size.
Do you mean something like this:
Would this work for you?
https://codepen.io/panchroma/pen/bGByxaQ
HTML
<head>
....
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
....
<div class="responsive">
<h1>this content is reponsive</h1>
<p>....</p>
</div>
<div class="user-content">
<h1>This content set by user</h1>
<p>...</p>
</div>
CSS
.responsive {
/* as required */
}
.user-content {
/* width and other values set by user */
width: 1500px;
overflow-x: scroll;
}
Related
I am doing a homework problem. And for this part, I need to make the container have a normal margin in computer view, and after toggle the device in chrome devTool, it has to be full width. I will upload screenshots to clarify that.
normal view
toggle view
answer normal view
answer toggle view
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="store.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<title>Store Home</title>
</head>
<body>
<ul class="navbar" style=" background-color: yellow;">
<li>Home</li>
<li>Hours</li>
<li>About</li>
</ul>
<!--<div style="background-color: #FCDFBB; max-width: 800px; margin:auto; height: 90vh">-->
<div class="container" style="background-color: #FCDFBB; height: 90vh; margin:
auto;">
<h1>Yiyu's Store</h1>
<p>
This is my personal store, it will sell some of my personal stuffs. <br>
Hope you guys love it!<br>
Also, I sell some small pets here, cute pet only! <br>
</p>
<p>
Another paragraph lol <br>
It will show with different color <br>
</p>
<p>This is the unordered thist that I'm displaying on this page</p>
<ul>
<li>Great service</li>
<li>Long hours</li>
<li>Quality products</li>
</ul>
</div>
<!--</div>-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
It may be easier to think of things in the reverse order: moving from smaller screens to larger ones. This is a tried-and-true workflow (of course there are exceptions) for designing and implementing screen designs that need to work on mobile devices on up to desktop resolutions.
This overview may be helpful: https://zellwk.com/blog/how-to-write-mobile-first-css/
The body tag will, by default, fill the available width of the window unless it is constrained (you will probably want to add margin: 0 to the body element to ensure there is no gapping along the edges). Inside your body tag, I would recommend wrapping all of your content inside a main tag (unless your homework assignment specifically prohibits it). main is a block-level element and will stretch to fill all the available horizontal space of its parent (in this base, the body element).
So, you get the mobile ("toggled") view stretching to the edges basically for free. It works out of the box.
Non-Bootstrap
At larger screen sizes (e.g., desktops), you'll want to constrain the width of your main element with a max-width declaration (via a media query) and set its right and left margins to auto. This will horizontally center the main element.
In its most basic form, this would looks something like this:
#media screen and (min-width: 1200px) {
main {
max-width: 1024px;
margin-right: auto;
margin-left: auto;
}
}
Breaking it down (non-Bootstrap)
Here, we're saying that at all window widths equal to or greater than 1200px, we want to apply a CSS rule that constrains the maximum width of main to be only 1024px. (I'm just pulling these values out of a hat; feel free to change them to suit your needs). And we want it centered in the viewport, so we'll tell the left and right margins to expand inwards from the right and left edges automatically until they reach the main element.
Bootstrap
Looks like you're using Bootstrap 4.0.0, so you have access to Bootstrap's flexbox-powered grid system. With BS's utility classes, accomplishing this layout can be done pretty easily. How you choose to do it will depend on how you've configured Bootstrap (and how you choose to use Bootstrap), but out of the box, you could do something as simple as this:
<body>
<main class="container-fluid">
<div class="row justify-content-lg-center">
<div class="col-12 col-lg-8">
<!-- content -->
</div>
</div>
</main>
</body>
Breaking it down (Bootstrap)
container-fluid creates a container element that is 100% wide at
all times. This means that at smaller window widths (e.g., on phones), your content will fill the full-width of the viewport.
row applies some basic flex-box parent styles that you can further tweak by setting its justify-content property to center at "large" (lg) window widths (with BS's utility class: justify-content-lg-center).
Since BS uses a 12-column grid by default, setting col-12 on the row's child element means that it will stretch to 100% of its parent's width. At large screen sizes, the above code says that the element should only stretch to fill 8/12's (or 2/3's) of its parent's horizontal dimensions (i.e., col-lg-8). Since we told the row element to center its flex-child at lg window widths, this layout will be horizontally centered.
Based on your screenshots, it doesn't appear that you want to constrain the width of your header (but I didn't see a header element in your markup). So that would need to be handled a bit differently.
As for your specific question, there are any number of ways you could accomplish this layout with Bootstrap (or without it), but maybe the above will get you started.
I am developing one website where the requirements are 1920 * 1080px. There are five sections in total and each of them would be the same specs (1920 in width and 1080 in height). I did not use bootstrap container as it's width is 960px and also using container-fluid I am not able to get the expected output. So I set the width and height of each div in scss and the page looks good on 1920px screen size. But when I open it in my laptop, it gets cropped really bad. I am also using multiple images, overlays with position and z-index properties.
The html structure is as below:
<div id="page_index">
<div class="wrapper">
<div id="one">
<div class="row">
<div class="col-xs-12 text-center">
<!-- Here are the contents -->
</div>
</div>
</div>
<!-- div id=two, three, four, five goes here -->
</div>
</div>
Here are the examples of one div where I set the height and width:
#one {
background-color: $g_color_blue_promotion;
width: 1920px;
min-width: 100%;
margin: 0 auto;
height: 1080px;
font-family: 'Open Sans', sans-serif;
position: relative;
}
In this case, what should be the best to make it fit for both screen sizes? Note that, this page is not required to be responsive but at least, the user should be able to view it on both of the screen sizes.
<meta name="viewport" content="width=device-width, initial-scale=1">
use this on yous JS file header.
I want to realize a 'reponsive' box (having a fix width) containing a logo (having a fix width) and an infobar (taking the rest width of the main box). The width of the infobar is therefor calced with calc() As the infobar would be useless if getting to small it also contains a min-width.
This works well until the screen width gets so small that the flexbox has to break into two rows. Now there are two problems in my design, i would like to solve:
1) I want the logo in wrap-row 1 to be centered horizontally
2) I want the infobar taking the whole width of wrap-row 2
(In my solution the logo sticks on the left of the first wrap-row and the infobar in the second wrap-row lacks the size of the logo, which I subtracted.)
Is there a solution using flexboxes?
Code (HTML):
<!DOCTYPE html>
<head>
<link rel=stylesheet type="text/css" href="test.css">
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body>
<div class="box wrap" align="center">
<div class="logo">logo</div>
<div class="infobar">infobar</div>
</div>
</body>
</html>
Code (test.css):
div.wrap{margin:0 auto;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:wrap;display:flex;flex-wrap:wrap}
div.box{min-height:100px;max-width:1200px}
div.logo{width:200px;min-height:128px;margin-bottom:10px;margin-right:10px;background-color:#456789}
div.infobar{width:calc(99% - 215px);min-width:320px;min-height:128px;text-align:left;padding-left:3px;padding-top:3px;margin-bottom:10px;background-color:#ABCDEF}
You need to enable auto growing to your infobox, so it fills the remaining space, and centering your whole content.
div.infobar {
flex-grow: 1; /* Fill the remaining space */
}
div.wrap {
justify-content: center; /* Center whole content */
}
Your whole code could look like this.
I am having trouble getting my 960.gs to take up the entire width of the browser. I want the grid to be 100% on resize, that is if I scroll out the text will appear smaller and take up less lines but the grid will still take 100% of the width.
There is this question here When using grid 960, can I still have a 100% width header section? And the answer was to set the top part to 100%. I added the code but this has no effect, neither does setting the body's width to 100% and all divs, ect. What am I doing wrong? Here is the code:
<!doctype html>
<html>
<head>
<title>My Fragment</title>
<meta charset="utf-8" />
<!-- Symbols rendered -->
<meta name="value" />
<!-- Do not need to close -->
<link rel="stylesheet" href="css/960_12_col.css">
<style>
body {
background:green;
}
div {
background: white;
}
.grid_4 {
height: 100px;
}
</style>
</head>
<body>
<div class="header" style="width:100%;"></div>
<div class="mainWrapper container_12">
<div class="grid_4" style="background:red">sdfds</div>
<div class="grid_4" style="background:blue">sdfs</div>
<div class="grid_4" style="background:yellow">sdfs</div>
<div class="clear">sdfds</div>
</div>
</body>
</html>
But this gives me the following result:
I want to see no green space on left side of the red column and the right side of the yellow column but this is not the case. How do I get rid of the space either side?
(Please note I am new to css and Html and have been following the learn html in 30 days, and whatever else I find online.)
First of all - <div class="header" style="width:100%;"></div> is not wrapping your container.
Second: add width: 100% to your mainWrapper class instead of .header, but that i know there is hardcoded widths in 960 grid system, so your columns with .grid_4 will be still width: 300px.
Try with another Grid System with fluid layouts, e.g.: http://www.designinfluences.com/fluid960gs/
I have a built a site for a New Zealand non-profit. It's based on Bootstrap 3 with responsive features disabled. It's working well... except for the way that the background images for outer divs display on mobile Safari.
Here is an example of the code:
<div class="top">
<div class="container">
<div class="row">
<div class="columns go here">
<p>Content</p>
</div>
</div>
</div>
</div>
.top {
height: 47px;
background-color: #000;
}
But when I view the site using mobile Safari the wrapper div (.top) does not appear to fill the full width of the screen.
Here's the site: http://betterbroadcasting.co.nz/
And here's a screengrab from mobile Safari: https://dl.dropboxusercontent.com/u/35912963/IMG_2746.PNG
I'd really appreciate any insight into what I may be doing wrong here. Thank you.
Do you have a meta viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
Otherwise experiment with changing min-width as suggested in this thread.