Divs are crashing on different screens - html

When I coded my website on my 18 inch screen, everything looks perfect! But, once I got over to my Mac (13 inch) everything just went big and the divs were crashing and everything looks extremly zoomed. I know this have something to do with sizing and the position, but I need further help.
One of the CSS it happens to are this code, is something wrong?
#client_play {
position: relative;
padding-top: 125px;
padding-left: 560px;
padding-bottom: 200px;
}
Link to page: like4fame.com/rsps/index.html
Link to my css: http://like4fame.com/rsps/css/css.css

A good starting point to resolving this issue is to remove the position: absolute, position: relative, and position: fixed styles in your code.
You also want to avoid using <center> and go with text-align: center or margin: 0 auto to center your text or div.
Removing all those styles from your code should help you achieve a better overall website fit for several screen sizes.
I also agree with jfriend00 above about reading about responsive web design.

Related

Large images with overflow: hidden; don't get centered in Firefox

I'm trying to get rid of the horizontal scroll bar (A) but when I changed my footer my images got messed up (B) and I'm not sure what is happening or what to do.
A: Unwanted horizontal scroll: https://mabonzo.github.io/prj-rev-bwfs-tea-cozy/teacozy/
B: Commented out footer and the images go wonky: https://mabonzo.github.io/prj-rev-bwfs-tea-cozy-test/teacozy/
Initially I was trying to change my footer rule-set from having left: 20px; to margin-left: 20px; or padding-left: 20px; when I ran into this problem! I speculate that it is related to the actual resolutions of the images, but I'm not sure.
Resizing the browser fixes centers the images.
I asked on a Slack group to no avail, I just tested it on different browsers and it seems like this is an issue only on Firefox. On Chrome and Edge they load no problem... So I guess my updated question is how to fix this for Firefox users.
EDIT: going to update the website, so the problem won't be in the (A) link. But the TEST site (B) will still be up and broken. Thanks!
Your footer element has an auto width (which is the full width of the screen, because it's a block level element) but then you say left: 20px (combined with position:relative) so now it's the full width of the screen but it starts 20px from the left, meaning it will always be 20px off the right side of the screen.
padding-left:20px on the footer will accomplish the same goal and not cause the horizontal scrollbar.
Your images seem to be defaulting to the left on Firefox because you have position: absolute on .mission-child img. Setting this to position: relative seems to correctly centralise the images for me.
Your footer occupies the full width on the page, in addition to having left: 20px on it. This offsets from the left, leading it to have a total width of 100% + 20px. To offset the text contained within, but not the footer itself, you're looking for padding-left: 20px.
Hope this helps! :)
Firefox might just render position: absolute; images within display: flex; position: relative; justify-content: center; align-items: center; divs weird!
I fixed the problem by adding the align-self: flex-start; and top: 0; declarations to the .mission-child img and .locations-child img rule-sets.
Thank you for the help!

Large margin off the page

I have an image that I want to achieve a certain effect. Essentially as you make your browser window smaller, I want to crop off left and right side equally, so that the image is not resized and I always see the center.
I have accomplished that in the following way:
<style>
.banner{
text-align: center;
overflow: hidden;
height: 350px;
position: relative;
}
.banner img{
position: relative;
left: 300%;
margin-left: -600%;
}
</style>
<div class="banner"><img src="https://lh3.google.com/u/0/d/0B1qZWmK2ucS8ZDN3Ni02VXo2SEE=w1129-h720-iv1" alt="Image is missing" /></div>
Js fiddle: https://jsfiddle.net/szsj6f9m/
One thing I have noticed with this approach is that if I make left be 100% and margin-left be -200% the image will then half way through start sliding back to the right. I don't fully understand why, I just know that I need to make the percentage to 300% so it behaves correctly on 320px screen.
Here is the example of what I am talking about, just resize your browser small to big and you will see what I am talking about:
Js fiddle: https://jsfiddle.net/szsj6f9m/1/
My question is this:
Is it ok to have the position of the screen so far and throw such a large left-margin on it? Does this causes any kind of problems from the performance point of view on smaller devices or any devices really? Are there any reasons you can think that would say not to do this.
I personally use left:50%;transform:translate(-50%,0); (works even for vertical centering) top:50%;transform:translate(0,-50%); https://jsfiddle.net/szsj6f9m/3/

Image isnt resizing for ipad screen/iphone mode

can anyone find the solution to my problem? I've beed tweaking my CSS sheets and it doesnt seem like its changing anything. I'm using the same rules for the "4sites" image as to my "About" img.
Heres a link to the site, you can see all of my css sheets from there too.
https://dl.dropboxusercontent.com/u/146014194/483F_ss14/Pro01/hwk/pro01_content_structure_presentation_B02_responsive_4sites_FINAL.html
I know you can create everything in just one CSS sheet, but my professor asked us to make it like the way it is..
I added a div tag around the img thinking that I could control it better.. But it doesnt seem like its the case!
Mucho Thanks!
You're trying to keep the height of image as 100%. If this is a responsive design then, the width has to be 100% and height to be kept as auto
CSS:
#Mybio #Mepic img {
clear: none;
float: left;
height: auto;
width: 100%;
margin-bottom: 100px;
margin-top: 55px;
}
Now the question is, the image is taking the whole width of the screen, well, that's normal. You have to restrict the parent div(id as #Mepic) and handle it with media queries for different screen sizes. Also I saw float issues on you're site. Use Clear:both to get rid of them.

Issues with Absolute Positioning of Div in Mobile Browser

I am having a lot of issues absolutely positioning a div called id="verticalGenesis" on the following website: http://genesispetaluma.com/index.html in a mobile browser, including both Safari and Chrome on the iPhone. I ideally am trying to position a logo to appear at the right of my screen using the following css:
#verticalGenesis {
background-image: url("../img/Genesis%20Text.gif");
background-repeat: no-repeat;
display: block;
height: 570px;
opacity: 0.8;
position: absolute;
right: 3%;
top: 70px;
width: 123px;
}
This displays fine in all desktop browsers, just as I am expecting, but is appearing in the middle of the screen on mobile browsers. I have experimented with using right: 3% as well but I am having the same issues.
I am sure that there must be a simple answer to this problem but I have searched everywhere on the web and stackoverflow and I can't figure this out. Could someone please point me in the right direction?
Thanks,
Chris
This won't completely fix your issue but it will get you closer. On the parent div id=wrapFix you should add position: relative to it. The problem is that when you have an element with position: absolute it needs to know what it should be absolute against. While it worked fine on desktop browsers it broke on mobile. Probably because of screen size or something. But I've added that line to that div and it seems to be a lot closer to fixing the issue on iPhone.

Lines in web layout for some resolutions

I have a problem with the layout I'm creating- problem being that in certain resolutions (or if you zoom in) you can see where the outlining of the div boxes are.
Here's what it's supposed to look like:
Here's what it looks like at some resolutions (or zoomed in):
If you need to see the website, it's here, though obviously it's not finished yet. You might immediately see the problem based on your resolution, if not you could zoom in or change your monitors resolution.
I would imagine this is a common problem with an easy solution. Thanks for your help!
If you change your #righthand to have a float:left, the vertical line at the right disappears.
#righthand {
width: 368px;
height: 373px;
background: url("../img/right.png");
float: right; // CHANGE TO LEFT
}
And if you change your #tp to height:248px, the other horizontal line disappears.
#tp {
width: 1024px;
height: 249px; //CHANGE TO 248px
}
I didn't have enough time to look at the site before it was taken down but I think it could be as simple as setting
background: transparent url(imgsrc) no-repeat left top;
that shorthand for the background image in css will lock in the spot. Other than that I would make sure you have
margin: 0;
padding: 0;
so that you can specify the exact width and make sure the cuts that are made are done to a grid so that when you slice the image you have an exact width.