My problem seems simple but yet I have tried everything and I cant come up with the answer. I am developing a website and on my main template I have an extra blank space either on both sides or on one side of the page because my HTML is wider than my main container, I would like to decrease the width of it so that the container fits the screen. any suggestions? I have seen the answers posted here before and it didnt help.
You don't really decrease the size of the html, the html is the size of the "viewport" which is the part where the webpage is displayed.
You can try this :
body {
width:100%;
margin:0%;
padding:0%;
}
So your main (body) container is the same size as the html and there will be no white sides.
This is a long shot as there is no code here to work with to see what you are actually talking about.
Related
I had a programmer code a page for my site, but when we migrated the code to my site (on Shopify), some of the things stopped working. I've been able to fix almost everything, but the top banner is still giving me trouble.
I want it to fill the full browser width (like the other banner a bit further down the page) but it's being clipped to 970px wide. How can I fix this to make it responsive and fill the full browser width? I also want the whole page to be centered under the header.
And the code I'm using is here (I'm including the full code so I don't miss anything important): codepen.io/anon/pen/xZZwZN
When I run it in codepen it works, so I'm wondering if it's clipping it because of the page width coded into my Shopify theme. Any ideas on how to fix/override this on this page only?
Remove float : left from the css of .container .columns to center align.
After changing this, the page looks like below -
Hope that helps!
as i have seen in your site, you just have to remove float:left; from skeleton.css link for particular page
so go in this file and remove from .container .column, .container .columns this class and your site is ok :) If you can't find the class then note line no 26 in your css file.
I've had a tough time trying to figure out what the issue with my CSS/HTML is, a new set of eyes taking a look would be greatly appreciated! I'm trying to get the content area to scale to the entire height of the page but it doesn't seem to be working in the example I've posted below. I've set both body and html to height: 100%; to no avail. Any ideas?
jsFiddle: http://jsfiddle.net/zVuyp/
(note that the CSS is an external resource linked to the left)
The page is not meant to scale to size so within the jsFiddle window it looks a bit odd, but the issue should still be clear enough. Cheers
Add height:auto to body and it should work.
The problem is as follows:
I have a header which has a width of 100% (thus it is from side to side of the screen). My background image, starts soon after the header.
In the body I have a box with contents which is centered. When I resize the window I want that the background is overlapped, thus I want this content box to move to the left when doing so. Until it reaches a limit that the background is completely hidden. It will then reach a point that the box cannot shrink thus having a min-width.
How shall I make the box of content overlap the background without hindering the header?
(BTW I have no idea what the tags are. Because this website is asking me for tags)
Thanks
This layout is called Elastic because the page contents adjust as the window does.
Since you didn't provide the HTML, we can't help you anymore than providing the relevant CSS style to apply to your mysterious "box".
style="width:80%; min-width:500px;"
If you're messing with HTML and CSS, I strongly recommend reading up on the basics. The more you know yourself, the more we can help you.
As the title states,
I am currently building a website, I am new to this and am trying to learn quickly. However this problem is quite frustrating as websites I have gone to do not help.
So at the moment I have an image that is of a high enough resolution that it should fill the screen easily. However when I load the HTML the image is zoomed in on the top right corner which is the only part visible. I have tried using "height" and "width" commands. I have also tried without them. I have attempted to use a <div> and <body>. However this problem still persists.
Another point is that when I use a <div> the whole screen is not filled, it still has a white border around what I believe is the <div>.
If you need to support older browsers, it's not as simple as just adding one or two properties.
Read this: http://css-tricks.com/3458-perfect-full-page-background-image/
Another point is that when I use a <div> the whole screen is not
filled, it still has a white border around what I believe is the
<div>.
You need this CSS to remove the default margin on body:
html, body {
margin: 0;
padding: 0;
}
OK, I would suggest you to make the width and height not in px but in % and secondly try setting the image using CSS
Read this Link, it will be more useful
http://css-tricks.com/3458-perfect-full-page-background-image/
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.