I have another problem.
I made a #wrapper in my page to control width of content, but...
It's not working on bigger screens than 1366px.
Tested it on 1920 screen and in debugger page has total width of wrapper (not 1920 but 1244px (wrapper width)).
Same problem was on 4k TV - Page was "scaled" to wrapper width.
It looks like full width of page was wrapper and "width: 100%" on body/sections were ignored.
Any idea where is problem?
Without !important on wrapper its same, max/min width not working. Changing units to vw not working also. Removing/changing meta tag not working. There is no other tags that overwrite wrapper. Styles has been cleared by SCSS Reset at start.
What Im doing wrong?
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 300px;
}
#wrapper {
width: 1224px !important;
margin: 0 auto !important;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="Stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="aaa">
<div id="wrapper">
<h2>content</h2>
</div>
</section>
</body>
</html>
it should be like that:
[-margin-[-wrapper 1224px-]-margin-]
[------------------1920px-----------------]
And its like that on 1920px resolution:
[--wrapper 1224px----]
[-1224px in debugger-]
Even if screen resolution is 1920px
There is link to cleared page: www.xileo.pl
And img from 4k screen:
As you can see, there is 3840px screen, where wrapper is scaled to 3840px and its not 1224px with margins.
I want it to be on 1224 px with margins.
If i understood you correctly, try this:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 300px;
}
#wrapper {
max-width: 1224px;
margin: 0 auto;
}
Provide a jsfiddle if this is not helping you.
*Edit added a screen from near 4k resolution, your screenshot is not from true 4k device, it is maybe scaled or something else is going on so you need to figure that one with some kind of debuging. All else behaving as expected. You might have something else in ur css files that maybe override your code, so you partial code you posted is working as expected.
Updated:
https://jsfiddle.net/8yt3fp0k/ the css works, definitely something wrong with the SCSS, probably another #wrapper is definned somewhere else out of the snipped provided.
css:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 300px;
}
#wrapper {
width: 1224px;
margin: 0 auto;
}
If you want it to be different on bigger resolution, than change width:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 300px;
}
#wrapper {
width: 1224px;
margin: 0 auto;
}
#media only screen and (max-device-width: 1224px) {
#wrapper {
width: 100%;
margin: 0 auto;
}
}
New answer after question edit and posted link to original website:
You have this rule:
.index .main-page .main .main-box .about-us {
width: 100%;
padding-right: 370px;
}
This gives the upper text block a very large right padding which diminishes its width. You can erase that rule to strecht about-us across the full width of the wrapper.
However, if you want .about-us to be narrower and horizontally centered inside the first wrapper, change that rule to
.index .main-page .main .main-box .about-us {
width: 1224px; /* any value you like */
position: relative;
margin: 0 auto;
}
Also, note two more things:
1.) wrapper has the 1224px limitation and is also used inside the other sections. So if you want the subsequent section (the one with the four text blocks) to stretch across a wider screen, change the width and max-width values in the wrapper rule
2.) You are using wrapper more than once. But it is bound to an ID, which should only be used once per page. So you should change #wrapper to .wrapper in the CSS and all id = "wrapper" attributes in your HTML elements to class = "wrapper"
Related
So, I am working on something and I am trying to create an image tag that is inside another div. The problem is, I write
.container {
padding: 0;
margin: 0;
}
.container img {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
<div class='container'>
<img src='https://www.clarkson.edu/_site_support/background_image_banks/images/tor_images/studcnt_4128800003.jpg' alt='A problem occured'>
</div>
But there is still some room before the edge. I also tried to put padding to 0 and margins to 0 but still, nothing.
Give body margin as 0px;
body {
margin: 0px;
}
Use a reset file or structure in css to set the values to a defined default and not let browsers get that. One of the reset files I've used is from here http://meyerweb.com/eric/tools/css/reset/ . The body in this case has a margin of 8px and since there is not box-sizing defined it affects the widths. Try that.
Try this code
body,html{
margin:0px;
padding:0px;
}
Set the float attribute to get rid of the extra room:
div img { float: left }
But about the size of the image you need to have in mind that if the div's width/height is set as percentage, the inner element's width/height can not be set in percentage.
If you'd like to set the image width/height in percentage, you need to specify the dimensions of the div in pixels.
E.g.
This works:
div {
width: 600px;
height: 400px;
}
div img {
width: 100%;
height: 100%;
}
But this does not work:
div {
width: 100%;
height: 100%;
}
div img {
width: 100%;
height: 100%;
}
Totally, what you need to handle both parts of your question is something like this:
div {
width: 100%;
height: 100%;
}
img {
float: left; /* or right, whatever you'd rather */
display: block;
}
Though, for a better suggestion, information about the container of the div's needed.
I want to know if you can let your site always be at the same size so when you view the site on a bigger screen, it just adds more space/background to the page.
(I don't want media queries so that the style changes when the screen gets bigger)
Using CSS you can center your main div (wrapper).
#wrapper {
width: 500px;
margin: 0 auto;
background: green;
}
body {
margin: 0px;
font-family: Arial;
}
#wrapper {
width: auto; /* You can set the width here, but if you want to make the page smaller on smaller devices you use 'auto' here. */
max-width: 500px; /* Set the maximum width of the webpage. */
margin: 0 auto; /* Center the wrapper */
background: green;
color: white;
}
<body>
<div id="wrapper">
<h1>Welcome to your webpage.</h1>
<h2>Site content goes here.</h2>
</div>
</body>
I just finished the landing page for a nonprofit's holiday campaign. I am having a little trouble with some little finishing touches.
Currently, there is extra white space on the right side of the page triggering the horizontal scroll bar in browsers. I am not sure why, I'd like for the page width to adjust to screen size along with the elements.
Also, I am having trouble with the styling of the four images of the people being featured. I'd like the images to display on the same row with no spacing in between when screen is minimum 1200 pixels, each image is 300 x 300 pixels. Otherwise, I'd like them stacked one on top of each other centered on the screen (for mobile). They are stacking, but are displayed to the left.
I am not the savviest of programmers as I am NOT a web developer. I am actually a the Social Media Specialist for the nonprofit. I appreciate your help.
Page can be accessed here:
https://secure3.convio.net/little/site/SPageNavigator/Holiday%20Page%20Wrapper/HolidayCampaign2015.html
Best thing you can do is wrap everything inside tag to a new div & set overflow:hidden;
<body>
<div class="wrapper">
Every other HTML will go here...
</div>
</body>
CSS
.wrapper {
overflow: hidden;
}
ALSO: It is not best practice to call scripts/css inside body tag. Those should be called inside tags
Try placing everything in a Wrapper div with the folowing css:
.container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
You could also try playing around with:
overflow-x: hidden;
For the whitespace (and scrollbar being displayed), add CSS for .row { margin: 0 !important; }. You currently have -10px +10px... I never understood why that was the bootstrap standard.
For centering the images, you want to add margin: 0 auto; to the parent div.box of the image.
The problem is all this margin fudging:
#media (min-width: 480px)
.row {
margin-left: -10px;
margin-right: -10px;
}
.row, #content-wrapper .fc-section__inner, .fc-section-outer .fc-section-row, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
.row, #content .fc-section__inner, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
After I turned all that off, things seemed to line up correctly.
Apply this to your CSS maybe styles.css it looks to be the stylesheet with the highest priority.
html,
body {
box-sizing: border-box;
width: 100vw;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* place this div right aftter thr <body> and before the </body> */
#jar {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
overflow-y: auto;
}
UPDATE
I forgot to post a solution for your images. This code applies to an element wrapped around the images. Most people use a <div>, but I'm using a <figure> since it's semantically proper.
Using max-content on a container like .frame makes it act like shrink wrap. You need to use the vendor prefixes which is a pain as you can see you have to write out height and width 3 times each.
You might have to use negative margins and reset padding and borders to 0 in order to get rid of the space in between the images.
.frame {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
height: -moz-max-content;
height: -webkit-max-content;
height: max-content;
margin: 0 auto;
max-width: 100%;
height: auto;
border: 0;
}
.frame img {
padding: 0;
margin: -2px;
border: 0;
display: inline-block;
width: 24%;
height: auto;
}
<figure class="frame">
<img src="http://placehold.it/150x85/000/Fff.png&text=FIRST" />
<img src="http://placehold.it/150x85/048/Fee.png&text=SECOND" />
<img src="http://placehold.it/150x85/fa8/375.png&text=THIRD" />
<img src="http://placehold.it/150x85/9a7/a10.png&text=FOURTH" />
</figure>
I'm having some trouble with a responsive design. The first that I have tried to create.
For some reason when I view the site on my iphone everything is zoomed in.
What I want is; On the desktop site, the logo will sit left in the '.container' and when viewed on an iPhone the image will sit directly in the middle.
Here is the URL: http://markpetherbridge.co.uk/peak.
I have added this into the html header:
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
this is the relevant CSS:
<div class="wrapper">
<div class="container" id="header">
<div id="peak-logo">
<img src="img/peak-logo.png" alt="Peak Architects" />
</div>
</div>
</div><!-- end.Header !-->
My desktop CSS is:
/* structure */
body {
font-family: "Calibri", Helvetica, Arial, Sans-Serif;
font-size: 16px;
color: #8d8c8c;
}
.wrapper {
float: left;
top: 0px;
left: 0px;
width: 100%;
background-color: #333;
}
.container {
position: relative;
width: 1000px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
}
and the CSS for the phone is:
#media screen and (max-width: 480px) {
body {
}
.wrapper {
max-width: 480px;
}
.container {
width: 100%;
max-width: 480px;
}
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 200px;
min-width: 480px;
margin: 20px 0;
}
}
It seems to work in the browser just not when viewed on an actual phone device.
This will work when #media screen takes effect.
http://jsfiddle.net/Enxu2/1/
You have a few issues because of your minimum width being set to specific pixels. For a mobile atmosphere you need to use a % so it can adapt to the viewport. Once you set something to width: 100% you need to be conscious of your left/right margins and padding as it can move elements outside of where they should be and allow the user to zoom in and out on your page instead of it fitting perfectly. An easy way to fix this if you are having some elements outside of your defined borders you can try changing some width:100% to width: 95% or even 90%. This should allow you to see which elements are causing the problem.
In the jsfiddle provided I changed some widths and some margins. I hope this will help you get on the right track!
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;
min-width: 100%;
}
.wrapper {
width: 100%;
}
.container {
width: 100%;
}
.container img {
width: 100%
}
You also need to make sure your image will be responsive, so you need to set it to a % width also. if you have a max width/height for the image you can always define it in the css using max-width: or max-height: but keep in mind your viewports.
I hope this helps!
I've got a slight issue with the below code in IE.
The design is perfect in Chrome and Firefox but IE renders the textarea size very small. I want it as it looks in Firefox or Chrome.
It might be a duplicate of
Consistently sizing a <textarea> under IE, FF, Safari/Chrome
OR
Firefox / IE textarea sizing quirk - workarounds?
but there are no proper solutions mentioned. So I started this.
I'm sure that jQuery can sort it out but I want only CSS in my page, Is there any proper CSS solution to it??
I'm not able to log into jsFiddle, so, no jsFiddle guys.. :(
<!DOCROOT html>
<html>
<head>
<meta charset="utf-8" />
<title>Code Compressor</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.container {
width: 100%;
overflow: hidden;
}
.column {
width: 48%;
margin: 1%;
float: left;
}
textarea {
min-width: 100%;
max-width: 100%;
min-height: 80%;
max-height: 80%;
overflow: auto;
}
.center {
clear: both;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<div>Input Source:</div>
<textarea id="sourceCode" name="sourceCode" ></textarea>
</div>
<div class="column">
<div>Compressed Output:</div>
<textarea id="outputCode" name="outputCode" ></textarea>
</div>
<div class="center">
<input type="button" id="compressButton" name="compressButton"
value="Compress" onClick="compress" />
</div>
</div>
</body>
</html>
If the height is not behaving as expected, so try to set a height for .column. Your textarea is inside of a column and its height is a percentage of his father, but, how high is your father?
Updated
You told that the .center layer is overlapped by the columns if you set a height to the textarea, right? Then we must to set the columns relative to each other and we have to explain to HTML that our .center should to be after our columns. To do this, follow the code:
.column {
width: 48%;
height: 500px; /* for example */
position: relative; /* add this to trasnform your columns
relative to each other */
margin: 1%;
float: left;
}
textarea {
min-width: 100%;
max-width: 100%;
width: 90%;
height: 90%;
min-height: 80%;
max-height: 80%;
overflow: auto;
}
.center {
width: 100%; /* to specify that your "center" must
to occupy 100% of the width on the screen. */
position: relative; /* to transform the position to relative */
float: left; /* to accompany the columns' floating */
clear: both;
text-align: center;
}
Percentage comprehension
Just to make things look better for you: to work with percentage, we need an initial point. This means that for something to have 80% of the height of something else, we need to know the height of something else.
In other words, to .something have 80% of height, we need to know the height of his father, and if his father have 90% of height, the father of his father must to have a specified height. At some point, we need a defined height.
JavaScript alternative
As I said, I have worked too much with percentage measures and no success to found a solution with pure CSS 2.1. Thereat, I created this mini-plugin in JavaScript + jQuery. No work-a-rounds:
function calculateResponsiveHeight(couple) {
for (var value in couple) {
$(value)
.css("height",
$(couple[value].wrapper).height() -
couple[value].spacing + "px");
}
}
Usage:
calculateResponsiveHeight({
".content": {
spacing: 135, // how much you want to spacing your layer?
wrapper: window // who is the reference point?
}
});
try this
#outputCode{
width:100%;
height:100%;
}
You haven't declared a height, add in a "height: 80%", you have just said what the max can be and the min can be - it doesn't intrinsically know what it should be in between.