Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm trying to take a template that was designed to be responsive and make it "unresponsive."
http://myhurlburt.com/NEW/bowling.php
The width of the page is set to 960px. When I view it on an iPad or iPhone, you have to scroll to the side to see the entire page. Do you know what in my CSS is causing that? I would like the entire site to "fit" into a browser so the user does not have to scroll to the side.
It's a big job to change an unresponsive site to a responsive one.
But you could try something like this to get started.. .wraper currently has it's width set to 960px.
.wraper{
width:100%;
max-width:960px;
}
use % for width, height and other margins. Use media queries also. If not, do zoom:1(2,3 or something);
Start by scaling the website with min/max widths and additionally use percentages instead of px.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Working on https://faraz-manan-2apz.squarespace.com have a quick scroll through and come back (view as visitor and enter captcha)
Header image is meant to be fullscreen on all devices, which it is. good.
but I want the squares with the pictures (id="page") to start at the end of the header image, regardless of the viewing device.
I tried adding padding in different % but the gap between header and content looks weird.
Please help. Thanks
Change #header's height to 100vh so it will be the same as the viewport height. Then change #page's padding-top to calc(100vh + 50px) to push it to 50px below the viewport height.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I´m trying to develop my first website. And I´m a bit confuse about some points.
I´m developping the html & css and then I want to do my website responsive.
First, I did some research to choose the width for my website, and i found information that the 960px is the best width, So I´m developing my content in 960px! But I have a 17 inch laptop and I have too much white space around the content. Its better do with 1024px for example? Or 960px is better?
And if I do with percentage for example, instead 960px use 70% I´ll resolve the white space, right? This is correct to do?
Second, to my site be responsive I was searching information and I was studying about media queries, but if I use percentage, I dont need to use the media queries, because the site is already responsive, right, or not?
Sorry to bother with this question that may seem simple but I am a beginner and I have this doubt, and maybe with your exprience, you can help me understand better.
Using percentage, your site will be fluid. To be responsive, use media queries, so you have a site adapted to the screen size, not forcing the content.
A little about CSS Media Queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Am making changes on a home page. i have background images and links to the image as buttons.
However when creating divs for each image i found out that the best way was to add div for each image as that will allow me to position the images side by side. i was told to use a class, however with class i would not able to put images side by side.:
this is my finished page as you can see the 7 images on the middle of the screen.
however if you open this in Firefox it comes out all messy :/
what is the best solution for this to have it positioned like the link i provided. but in all browsers. is divs the best way?
This is my js fiddle with the code: http://jsfiddle.net/uJhvk/
e.g
<div id="testimage">
<div id="a1">Awards</div>
</div>
any help will be grateful.
http://jsfiddle.net/ahallicks/uJhvk/1/
I've added floats to #testimage2-6 and margins to the last two to space them out
float: left;clear: both;
on #testimage2 to make it sit on a new line
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I recently made a website for a church. I used Foundation, SASS, and Compass. I've almost got it finished up when I notice that if you size the window down I get a horizontal scroll. So I add overflow-x: hidden; I thought that fixed it but when I tested it on my iPad I am still getting roughly 20px of padding on the right side. I then thought maybe it was from the box-shadow which made sense so I removed all the box shadows and its still there. Here is the link: http://www.jessefoutch.com/fumc/ any help would be appreciated.
Foundation already has its own set padding and margin for grid-columns and other grid elements. You can either change these parameters in the _settings.scss file in Foundation, or you can set the padding or margins to 0 manually and that should fix any of your issues. I checked and didn't actually see the issue you were speaking of however, so it may no longer be affecting your site
Perhaps you need to clear your cache. I have looked at the site in Firefox, Safari, and Chrome and only saw the standard browser scroll bar when I resized.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having a terrible time getting my height of my DIVs to properly scale with the height of the DIV's containted inside of them. Currently the DIVs that contain other content DIVS are not set to any specific height, but for some reason they have a height way beyond the content that is contained in them (which currently isn't anything)
Here is the link:
http://www.brockpatterson.com/secret.php
As you can see, the 1st blue area is super tall, and the lighter blue area below is the same. I'm not sure if some other CSS element is messing with it. I've been looking at it and messing with different perameters for a few hours now.
Thanks,
drummer
#content_container is set to 100% height. Remove that and you'll be fine.
Why do you have height: 100% at #content_container?
(Also, you should never have two HTML elements with the same ID...)