I have a website that I am working on that has a simple widget that shows the current status of certain systems. The problem I am having is that when the view goes to mobile (iPhone size about) or the screen on a browser is creating the same effect, the rows that have objects in them start to stack and become invisible or cut off. I don't want these to ever stack because the design doesn't make sense that way. Is there a way to make is so something will never stack? I can't seem to get any clues as to how to fix this since the bootstrap choices don't go that small. It seems like it would work if there was a col-xxs-* class or a col-mobile-* class.
You can customize twitter media query breakpoints
so the col-xs-* can start from 200px instead of 480px for example.
here is the link:
http://getbootstrap.com/customize/#media-queries-breakpoints
Edit the variables and download that version. you can also use bootstrap Less to edit these variables in your project as it suites you instead of re-downloading the files every time.
I'm not sure if this helps,
Make sure the viewport is configured correctly:
Make sure you don't have content that is wider than the viewport.
For instance if you have an image that is wider than the viewport set the CSS to
max-width:100%;
From what I can understand you don't want to stack the divs one below the other in mobile view. Then try to use class like table-responsive that allows the content to appear with a horizontal scroll bar.
Then you have to set the min-width for those columns that you don't want to wrap.
Or white-space:nowrap
The issue that I was having is there was a custom div class that was put into the hosting software's global styling. This class duplicated the idea of the Bootstrap col classes. It started from col-all-12 to col-all-1. The problem is this would override all the other bootstrap styling and make things a certain size no matter what width the screen is. I appropriately adjusted these and it seems to work. I had to rebuild this code from scratch but now it is good!
Thank you to all those that helped and gave suggestions!
Related
I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far. I am currently working on the site www.thrivetech.com and having an issue. There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height. At different screen widths these 3 columns change height and sometimes don't match. Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine. I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work. Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height. I have even contacted Squarespace support and they haven't come up with a solution. See image below:
I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on. I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution?? Thanks for looking!
RESOLVED:
I fixed the issue by using a media query to set the parent element of these 3 columns to display: flex; when the window is at least 640px wide. The reason I need the media query is because they need to display as blocks when the window gets smaller so we can take advantage of Squarespace's native responsive design so the columns will stack on top of eachother on mobile and smaller screens. Here's some simple pseudocode:
#media only screen and (min-width: 640px) {
#parentDiv { display: flex; }
}
I mobilizing a website and would like to know if I can use one or more rather simple css rules to shrink a main div that has many nested divs and still have everything look proportonate in the smaller screen. The page is... http://www.junkyardzombiez.com/choose-a-zombie/ and the container is Any help is appreciated.
There is no magical way to to do as it's something that needs to be built into the site initially. If you had written the CSS to use % rather than PX then you would have more scope to work with but hard coded PX values mean it's built to stay at that size.
As it stands at the moment, you will need to change a number of classes to scale in width based on screen size.
It's worth looking at some frameworks like bootstrap that can help with this.
I'm not even talking about mobile (just yet), I set widths and heights that are based on the pixel count of my laptop's display, but on my desktop 22" monitor, everything's out of place, div lines are too short (larger display, so it makes sense), etc.
I'm thinking I should use strictly percents, so instead of "width:200px", it'd be "width:64%", would that be a good solution?
Also, I see some websites, they adjust the content when you shrink the browser window (looks like an effect of "margin:0 auto", just keeping things centered), but also, when the width gets small enough, it just stops adjusting, it stops because moving any more and the content will start moving to lines below it in order to fit... How can I get this same effect?
Thanks!
This is done by making your site "responsive" which basically means that you use a grid system that scales and the screen size changes.
There are a couple of frameworks out there that help with this. My favorite is Foundation (http://foundation.zurb.com/) but there are others like bootstrap (http://getbootstrap.com/)
There is a ton of documentation on these sites you should focus on the grid sections:
http://foundation.zurb.com/docs/components/grid.html
Hope that helps.
There are websites using the responsive layout. Means you have orientations/everything fixed for the mobile screens, tablets as well as full size pc/laptop screens.
They make use of a grid system.
Common ones are
Twitter Bootstrap (Two different versions having different UI and
approaches are available at http://getbootstrap.com/2.3.2/ and
http://getbootstrap.com/) This one's my favourite as its too easy to
use
Zurb Foundation
Skeleton
html5 Boilerplate
Sprout Core
Less Framework
You may pick any one you like. They all provide a basic css and javascript to handle things out nicely, a wireframe of a complete website is provided and an extremely well documented manual is available on their websites. Its actually fun and makes work faster.
Cheers!
One useful and recommanded unit is the viewport percentage length that will adjust accordingly.
for example to get a div the size of the window and another div on top of the first one:
<div id='one-page'></div>
<div id='inside'></div>
#one-page{
width:100vw;
height:100vh;
background:red;
position:relative;
}
#inside{
width:10vw;
height:10vh;
background:black;
position:absolute;
top:10vh;
left:20vw;
}
http://jsfiddle.net/xv7Yf/
I had to redo a website from flash to html/jquery.
Everything looked great. Until I tested the site on a netbook where the screen resolution is much smaller. All the elements were misaligned or didn't stretch as I wanted it to. Or there were scroll bars everywhere.
So, How would do I make it stretch or resize properly,
Is there a property which I can set somewhere that would resize everything proportionately?
You should use heigh / width in percentage(%) rather px / em. change the css file.
Is there a property which I can set somewhere that would resize everything proportionately?
No, I wish :P You'll need to redo the layout to make it liquid or use media queries to make it responsive to different resolutions. I'm afraid both solutions could be pretty complex.
Is there a property which I can set somewhere that would resize everything proportionately?
Everything? No. Font sizes won't adjust based on window size (at least not without JS).
You can set the widths of most things using percentage units in your stylesheets, but even then there will be a point where things will break down.
The current buzzword is responsive web design (I can't comment on the quality of the links from that page) in which media queries are used to provide different designs for different sized browsers.
The property called Media Query we mostly use this property with Responsible Web Design. In which we tell browsers change the specific css property at that particular screen size.
Check this article for more http://css-tricks.com/6206-resolution-specific-stylesheets/
& for Responsible Web Design mostly use value in Percentage instead of Pixels .
Check THIS website for more reference.
unfortunately there is no "magic" which scales things up/down. i can think of some guidelines:
Use relative widths for things (percentages) instead of absolute value
no hardwired sizes, keep them in separate CSS documents
work your way up: choose a minimum resolution, work upwards from it. it makes sizing things much easier.
The question was to RESIZE not to REALIGN. Using percentiles will only change WHERE the HTML elements show up on the page. It will not change their SIZE.
you can use with and height in percentage to set your screen for all resoulation..Give the 100% width to the body and the div you want give 100% width.
Sorry if this post is too many of question, but because i weak in web design but i want to do these effect in my website, could you guy please let me know on how to do it ?
First...Please visit this site
http://net.tutsplus.com/
Question 1 : May i know how could i do the effect of resizing in Asp MVC 3 ?
when our site got a sidebar user screen size less than 1280x800, it will display single column of sidebar. When user screen size larger than 1280x800, it will display two column of sidebar.
Question 2 : when the screen size is too small, left side of site will display only about 20px of margin. All the image and background will hidden. exact like when you re-size your browser when opening nettuts site.
The best way to adjust the layout of a page with respect to the size of the viewport that it is being displayed on is with CSS Media queries. Before you do anything, read this:
http://www.alistapart.com/articles/responsive-web-design/
It's practically the bible on the subject.
After that, give the specs a read:
http://www.w3.org/TR/css3-mediaqueries/
The less CSS framework comes with a set of useful media queries and is something I use as a very simple framework:
http://lessframework.com/
It depends of the positioning atribute: absolute, relative or fixed..
Try to use percentage rather than an absolute, relative or fixed value.
Otherwise try to control the left-margin, right-margin, top and bottom and test, test and more test until it get what you expect.
I do this myself all the time, and always work.
Answer to Question 1
This is not ASP but JavaScript. Basically you will need a script that is launched each time you resize the browser. It should then check the new viewport width and modify some of the CSS for the sidebar