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 8 years ago.
Improve this question
I was just wondering how to make webpages like zavee.com take up the whole screen rather than just in the box, like how groupon can make it look like it takes up the whole screen. Also any other help on making it look more modern? I’m a beginner coder, and I am just testing out how to make websites look better with inspect element or downloading the files, so one day I could maybe make my own website.
Taking up the whole width of the page is a matter of responsive design. For example, you could operate in vw (view width) instead of pixels. A div with 100vw (one hundred view width) is taking the whole width of the screen, 50vw - half of the width etc.
If you want to display the page in the full mode you should find the div wrapper that contains the whole page and assigning the width to 100%.
For example: #wrapper {width:100%;}
Either use f11 I think it is, or you can swap browsers, because on chrome for me that looks exactly the same as stackoverflow right here.
Related
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 6 years ago.
Improve this question
This is a general question for you web-dev folks out there. I've seen lots of CSS out there that has a very specific pixel or percentage count for css elements like "padding" and "height", etc. Experienced web developers seem to really nail the positioning of their content. I find for doing something as simple as centring a element into the flat middle of my screen, it takes me lots of testing with different px or % values for "padding-left" or "height" in my styles before I get it right, and it just feels clumsy.
So I was wondering, is there some rule of thumb, or guideline, that you all follow for choosing px or % values when building your web pages?
Using percentages corresponds to fluid designs, the web page thus created will be responsive in nature. Using pixels is as if you are using fixed values, the web page won't be responsive. this design pattern will be suitable to web pages which are intended to be kept at a fixed size. For responsive design it's good to use bootstrap, as they have done most of the handling of css for you (indeed for different screen sizes and resolutions), we just need to use the appropriate css classes as per our need. Doing so, the web page will be responsive.
It's recommended to use responsive design, go for % values so that the web page doesn't break for different screen sizes and resolutions.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm using cordova and I have some absolute positioned elements that behave different depending on device resolution. Some text positioned over other elements if the screen is larger, for example.
What do you think is the best css unit to use for distances and position?
Do you have another approach to this kind of problem?
In general I always use rem unless I specify sizes in percent of parent elements. This way you have a single reference for sizes, which helps me mentally relate one thing to another. Also, it all stays consistent when the user zooms.
If you need to make sure certain text has enough space or is abbreviated correctly, it's sometimes necessary to use JavaScript in order to resize based on available and needed space. A common technique is to render a simplified interface if showing on a small resolution. You can detect events like window resize, document load, etc.
If you need a more tailored answer, please make a jsfiddle to illustrate your problem.
Percent should do the job! It will scale according to the resolution.
Or maybe vm / vh is what you're looking for.
http://snook.ca/archives/html_and_css/vm-vh-units
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 8 years ago.
Improve this question
I'm working on this website: www.artetia.com
The thing is that when I resize my viewport I get a white stripe in the right side of the browser as if the Body of my website is smaller or having a minimum width. Can't find how to solve this, I tried with Firebug to check the structure and seems that the html can't get smaller than 960px or so...
You need to stop the backgrounds being wiped out when the viewport is narrowed below 960px. Here's one way to do that via CSS:
div[id^="slide"] {min-width: 960px;}
(For those not seeing the issue, it's a common layout issue. If you narrow the browser below 960px, a horizontal scroll bar appears; and if you scroll right, the backgrounds have been wiped.)
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 8 years ago.
Improve this question
It's really bugging me and I have no idea why when I view this site on my mobile, it only shows the middle section and not the sides.
My side navigation is on the left side and completely cuts it out and I can't scroll to it.
Is there some sort of media query I could try? or change my CSS somehow?
Sorry I'f I'm being vague but I have no idea what to ask to make it work.
Here's the site www.joetest.comyr.com
thanks in advance for any help !
You have the width of the #mainpage set rather than a max-width, so as the page is scaled down, the #mainpage is taking the whole screen. Also, you have a negative margin-left set on the #leftpanel which pulls it off the screen when the screen size is smaller. I was messing around with your site using firebug right now and by removing the margin-left attribute I was able to keep the menu on the page while resizing the browser.
You're probably going to have to change your html structure though if you want to retain the exact layout on smaller screens.
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 6 years ago.
Improve this question
I've been trying to figure out for hourssssssss how this website does this. If you go to [] and resize your browser screen, you'll see that the main content container in the middle gets smaller as your browser size gets smaller. How does it work?
I'm trying to do something similar with a wordpress website I am building.
Thank you,
AJ
All of the stacked elements in the main column have a width of 65%, which refers to a proportion of their parent element. In this case, that's the entire width of the viewport. They'll resize to their min-width, which is set to 700px, and also their max-width, which is at 1920px. Pretty straight-forward CSS.
Get familiar with Firebug and/or Chrome and Safari's developer toolbars. They're indispensable for anyone working with websites.
I believe you are referring to it being Responsive. It likely uses CSS #media queries to change the sites width depending on the resolution of the browser.
You can find more information here: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Also, your site is not a great example of it, see better examples here:
http://mediaqueri.es/