I am currently formatting my Django web application using Twitter Bootstrap, but things start getting weird when I resize the browser.
Ideally, I would like to keep the same format regardless of browser size, and if they go too small, than just a horizontal scroll is introduced:
If the screen resolution is 1024x768, I want the site to look good (using the full width of the screen, no warping or adjustments of image files, no horizontal scroll). If the display is wider than 1024px, there are blank space on either size. If narrower than 1024px, a horizontal scroll is introduced.
I was wondering what the best way to go about this is. Is there a way with Twitter Bootstrap? I was also thinking of putting everything into a border-less table with defined widths and centering the table on the screen? Hoping then things inside the table wouldn't resize down.
Related
I have images given to me but they are too big to fit in my static website.
How can i optimize these images? What is optimum height and width for the website?
The optimum size for the website depends on the device that you are going to
view the website with(eg: Desktop, mobile).
When selecting the width of the page make sure the viewer does not have to
scroll horizontally(width should fit the screen). Height should depend on the
contents in the website(can be allowed to scroll vertically).
The best way is to use bootstrap to make the page responsive so that the page
will adjust itself to meet the screen dimensions. Use the following link to use
bootstrap in your page. http://getbootstrap.com/
I'm trying to make a responsive photography website but I'm having trouble getting it the way I want it. I'm using Dreamweaver and have created responsive images that look great on my screen. I've specified that one image must float left and the other float right, so that they fit nicely beside each other. However, when I make the screen smaller, the images fold under each other. What I actually want is for them to shrink together, maintaining the same layout. What is the best way to establish this?
You need to play with the image size, I advise you to read about media querys for responsive web design, with that you can choose the different size according the screen size in different devices
I'm using bootstrap for a personal website, and I'm having trouble with a Javascript slideshow.
Basically, when the browser window gets smaller, instead of the slideshow DIV content shrinking proportionally and maintaining the sizes of the content, it is cutting off the edges of the content.
The text isnt breaking to another line when I resize the browser it just covers up the content. I'm sure this is very simple but I just cant work it out, would be very appreciated if someone could take a look, here is the link to the website you can see for yourself.
http://www.luke-taaffe.com
I see some issues with your HTML. Layout you have created is not required and you'll keep running into issues as you move forward with it.
Hence i would suggest to fix it now itself.
As you want to use bootstrap, get more idea about their responsive design elements : Tutorial / Bootstrap Responsive Grid System
Then choose a theme among these
It will automatically take care of you design's responsiveness.
Ok I fixed the issue, I spent about an hour looking at the media queries in bootstrap-responsive.css.
First I had to use navbar-right in my header and remove all of the margin, padding I had previously used to position the links.
This was stopping the links this maintained the links to the right of the window without covering them when I resized.
Then the navbar was breaking onto 2 lines, so I had to change the media queries.
I'm having a problem with a website I've built: whenever I view the site on a smaller monitor or when I resize the browser window, the content gets covered by the other divs. I need the content to be fully visible, no matter what size the browser is.
http://sophisticateddesign.nl/cfreport/overons.html
Also, on the homepage the text gets cut off a little bit on the bottom row when I resize the browser. I need this row to increase in height a bit, which apparently can't be achieved by simply increasing the divs' height.
http://sophisticateddesign.nl/cfreport/index.html
You should take a look at responsive web design. By using a fluid grid together with one or many media queries you can achieve what you're asking for.
Here's a good introduction if you'd like to get started. I can also highly recommend Ethan Marcotte's book about the subject!
The simplest way is not to define widths in pixels but using only width in %. You defined for example width: 960px; for <html> so if the browser window is less than 960px the whole content of this site won't be visible. You also defined the footer width and probably some more elements.
But the true is nowadays you should learn rather Responsive Web Design to create your page adjusting to device width. Many sites are being used by people on PC, laptops, tablets and mobile phones and you cannot create complex site to look nice on all those devices without using responsive design techniques.
I am designing horizontal website with 1024*768 resolution ,but when i changed the my computer resolution to 1600*900 that time website layout shows the some part of second page on a screen . what to do solve this ?
You have a few main options.
Completely disable the website using Javascript to detect screen resolution and redirecting if they have the incorrect resolution (something I would not recommend).
Dynamically size everything so that everything scales based on the resolution.
Pad out the extra space with a plain background colour and center the 1024 x 768 area. (Note this will not work for people with smaller screen res than your fixed layout size)
There are of course other options but I would consider these three. It depends though what it is you are trying to achieve.