I've been working on an interface for a website. I'm stuck on a simple thing that I've spent hours and not get it fixed. I'm giving the prototype of my project. When you zoom in to page or minimize the page the alignment gets messed up. How do I fix that?
http://www.thewebblog.net/server/sosyalagDenemem
You are using floats and this is how they work. As many as possible will fit on the same row and the rest will wrap below. When the container is resized, any floats that fall off the edge are again moved below.
The easiest band-aid solution would be to add a wrapper div with a fixed width which is large enough to fit all of your floats without wrapping, or at least a min-width. Note that this will cause a horizontal scroll-bar on any window smaller than this width.
If by "minimization" you mean window resizing, it is because you are floating those columns. There are two ways you could go about fixing this.
1) Make your website responsive. You can find tons of information online about this, but here are some resources to get you started:
Ethan Marcotte's Dao of Flexibility talk
Looking Beyond Common Media Query Breakpoints
2) Add a min-width to the <div> that contains all of your floated elements. Make sure the width is more than all of your floated items lined up. This will make sure that if the window gets smaller than the container, instead of pushing those elements below each other, it will just keep the container from getting farther and create a scrollbar.
Note, this isn't necessarily the best way in terms of designing for mobile, tablet, etc., but it will certainly keep your site from breaking on "normal" desktop monitors. If this is your only target audience, then there's no problem with it.
An example of this would be:
.container {
min-width:960px;
}
Related
I am using the Gatsby/MUI starter as a boilerplate for my personal site. In my personal site, I am having the problem that all pages are rendering as slightly larger than the viewport size. This issue is consistent on mobile and laptop/desktop sized screens.
I am using MUI Grid. I have made sure that my meta viewport head element uses width=device-width. As far as I can tell this does not depend on fixed-size elements or grid spacing options, such as margin or padding.
Does anyone have any debug suggestions or would anyone like to see a particular piece of information that would aid in the debug process? Site is available at https://errcsool.com
My code is available here
Update: If I get rid of all pages except for index, this problem occurs as soon as I place something inside of an MUI with spacing options <Grid container spacing={x}>
Solved. Adding a root div element with padding at least half of spacing pixels, so for spacing={8}, the root div should have padding={32}.
This is well-known functionality of Material-UI Grid.
Related to this issue.
I am farely new to both HTML & CSS (maybe 4/5 months experience.),
I have started developing several websites as a learning basis,
& then I realised
that all of my designs were not 'responsive', so subsequently, I have started to replace all my 'px' values with vw, vh, vmax & vmin.. I have run into some sort of brick wall with my learning curve and wondering if anyone else has experienced this or knows any good sources that could help enlighten me..
Using the 'vw' property is at first sight going well, when I change the browser size everything shrinks, as intended to the viewport width, but getting the vertical scaling of objects, divs, inputs & options is proving to be somewhat difficult. I have attempted playing around with calc() vmin, vmax, vh etc, but they don't seem to be interchangeable unless I stick all of these into css variables. I know that flex-box and grid are designed to be responsive but these still don't seem to do much for the vertical scaling on smaller devices.
I have heard of em's & rems as unit's for font but these are not "responsive",
in the same way Vw & Vh are. ie, changing size on window resize.
Is there something I'm missing, Youtube searches for responsive design only yield hundreds of results for both flex-box and grid. But nothing much for general scaling down of both height and width (proportionatly)..
the first main question is which one is better out of the two
for proportionate scaling
(Vmin or Vmax)? across a range of devices?
if I am currently not intending to use any media queries?
I've tried multiple variations of calc(vw -*/+ vmin/vmax) + px/em/vh/vw/rem..
but the vertical measurements still stay the same... Can Anyone point me towards a good resource or video on youtube for this subject..
I'm finding the inspect element/test by device app in firefox very usefull, but need a shove in the right direction....
Any Ideas??
The first thing would be to check if you have set the viewport meta in your index.html file. If not that should be your very first step.
Secondly before writing the css for a website, you should go through the flex box and grids in css. You could spare with grids but flex box is of utmost importance. Then you could go further and study a little about the BEM model for css. Playing around with percentages and REM’s or vh may not help as you would have a web page which would shrink and expand according to the content that you tend to render. You should therefore make not of the layout of your website and what all things need to stay fixed and what all is going to change when you switch to another device. You should also go through using min-height , max-height and min-width, max-width with flex box that should make your life easy. Good Luck!!!!
try to search about bootstrap because when it comes responsiveness of the website bootstrap is your friend.
I have looked at many different peoples answers to this problem but they only account for one image.
I am having a problem with the the two images that i have placed in my header, when i resize my browser i want them to scale down with it so that they dont displace my whole site.
i have it hosted in dropbox so you can see what my problem is: https://dl.dropbox.com/u/13722201/Dorset%20Designs/home.html
also another problem im having is un attaching the footer from the bottom of the screen and putting it below the body so users have to scroll down.
p.s I attached the footer to the bottom many months ago and I forgot how to undo it.
SORRY FOR THE TERRIBLY MESSY CODE
thanks in advance
Arran, 16
Here's how I'd do it. First, style each image using CSS to have width:100% and height:auto. This makes them respond to the sizes of their containers. Lose those width and height attributes from the img tag - I'm not even sure if those are valid anymore.
Now here's where the clever part comes. Your images are 550px and 298px wide, which is roughly a 65%:35% ratio. When the header is at its most narrow point before breaking, it's about as wide as the sum of the two. So give the big image's container max-width:65%, and the small image's container div max-width:35%.
This way, when the browser window is smaller, the images scale down correspondingly - and don't become larger than they need to be when the window is wide. I tried it out on your page, and I think it worked - see if it works for you. :)
When creating a web-site design, is the only real option to provide a fixed content width?
I notice most major websites (this one included) center all the content into a fixed width, which ensures all elements look correct on all screen sizes.
I think I already know the answer to this, but a colleague seems to think that there should never be a horizontal scrollbar and a website should resize to the users screen width. I make the argument that text can resize but other elements can’t (buttons, textboxes etc), so a fixed width is the only option.
I'd love your opinions each way.
Surely fixed width is the only way you can guarantee the correct layout on ALL browsers?
You can get clever with floats/media queries to make layouts work well at narrower widths.
But it is indeed more common to go with a fixed width:
It’s easier to design
Not many people have narrow monitors these days — most websites seem to assume they’ve got 1000 pixels of horizontal space to work with, and I haven’t heard of them getting many complaints
Touch-based OSs (iOS, Android et. al) make zooming web pages feel very natural, so pixel dimensions aren't quite as important there.
When lines of content get too wide (I think more than around 60 words?), they get difficult to read, so there’s not much advantage to be gained from having elements expand to full width for users who have bigger browser windows.
I think the most likely group of users to have less horizontal space available is smartphone users, and you’re going to want a specific design for them if you care that much about their experience.
Oh, just one thing though: “Surely fixed width is the only way you can guarantee the correct layout on ALL browsers?” With the greatest possible respect, that’s a bit of a programmer’s way to think about it. You can’t guarantee anything about web page rendering. Browsers and operating systems can do whatever they want. That’s the web. Let it go.
Dynamic-width web-sites are generally composed of one or many percentage-width blocks which make 100% total. So blocks size change with resolution or browser resizing, but if total width is too short it can occure lisibility problems, so a minimal width is specified for <body>, in which case a horizontal scrollbar appears.
But you can think differently : http://www.smashingmagazine.com/2008/08/14/will-horizontal-layouts-return/.
I tend to make my websites have a minimum width for legibility, but otherwise the width is determined as a percentage of the window size (I normally pick 80%).
I find this gives me ample coverage of the viewport, whilst still looking good on larger monitors.
I find this approach fails on larger screens when there is little content, as the content tends to get stretched into a line at the top of the page, which can make things confusing. So for those pages it can be good to have a fixed width, centred style.
No. A thousand times no.
If your website presents any kind of body text, fixed width is an abomination from the depths of the mid-90s, forcing readers to scroll like crazy, while being mocked by vast expanses of unused screen space to either size. (Now, a variable number of columns I might buy.)
BTW: flag for CW.
Horizontal scrollbars are a big problem. A properly designed website should be able to scale down to be used on small resolution screens (640x480). Also, it's nice to have to have my browser window maximized just to browse a site. Also, there's no reason why a person with a high resolution monitor shouldn't be able to use the extra space their monitor gives them.
My designer keeps throwing out the term "liquid" layout. What does this mean?
Thanks for the clarification, I have always just called this a percentage layout, and thought he was saying that the pieces could be moved around, and that was liquid
A "liquid" layout is a site layout that expands to fill the entire available area as the browser window is resized. Typically this is done using CSS. Liquid layouts can be quite helpful for certain types of sites, but they also tend to be significantly more effort than fixed width layouts, and their usefulness depends on the site content and how well implemented they are.
From http://www.maxdesign.com.au/presentation/liquid/ :
All containers on the page have their
widths defined in percents - meaning
that they are completely based on the
viewport rather than the initial
containing block. A liquid layout will
move in and out when you resize your
browser window.
Basically, it's a layout of a web page that doesn't rely on a specific width specifications for elements in the page.
See the discussion over at Wikipedia.
It means a layout which adjusts dynamically to the browser (or whatever client) width and height, to make efficient use of all available screen space, as opposed to (mostly) fixed width layouts which are made to fit a common denominator resolution at that particular time (e.g. 800x600 used to be the norm for websites for many years).
See this:
http://www.time-tripper.com/uipatterns/Liquid_Layout
Liquid Layouts refer to the design concept of a website. A liquid layout will move in and out when you resize your browser window, due to is having percentages and relative widths in the CSS.
It just means that it will contract/expand to fill the browser's window size (usually the width), up to a certain point if things are done well. Otherwise text can get quite hard to read on big (24"+) monitors.
One of two:
The design will scale to the width of the browser (as in, if the browser was 1024px wide, the design will be as well)... although this does get quite fun when designing for 100px wide browsers (sometime designers will actually set a min-width though).
The design has a fixed width, but is set in a measurement using a relative size... for example "em"... so as the font size is increased, the width of the page increases.
A liquid layout is a method of CSS layout that defines all widths in percentages, so the areas of the page will grow/shrink when the viewport (browser window) is resized.
They're very useful if trying to create a site that will fit both large and small screens. They're a little more difficult to work it than fixed layouts, because you're relinquishing some level control over how everything fits in the page, and you have to pay very close attention to your content, to make sure it doesn't fall apart aesthetically on resize.
I would say liquid layouts are most useful for text heavy sites with a fairly basic column layout. You might also find a happy medium with an 'elastic' layout -- one that has both liquid and fixed areas.
In a true Liquid layout, your content expands and contracts to fit your user's browser window in a meaningful, calculated and intelligent way. So it's more than just setting your column and container widths to percentages.
Done well, this can result in a increase of perceived quality. Done poorly, it's a usability nightmare.
Going Liquid is a huge pain the rump. The pain is worth it though if the topic/client/product(s) you are building the site for have a strong visual quality to them (think summer blockbuster film site), require a certain fit and finish, or if it needs to display large chunks of data.
Note: I'll update this a bit later with links to good examples and citations for my claims