I am using twitter's bootstrap 2.3.2 to build a responsive site.
I am trying to arrange the spans correctly for when you stretch the window from tablet width (768px - 979px) to a laptop/desktop width (980px+)
In the two attached graphics, you can see what the tablet looks like and what it will look like when it is resized to a desktop width.
I know how to accomplish showing spans for only desktop .visible-desktop, but I am not sure how I would stack up the newsletter and check-in club on top of each in the 6th span/2nd row to the far right (in this case).
I've tried setting each span to span4, but it just doesn't display like it should in both views (tablet and desktop).
Any help is appreciated. I assume I might have to use some form of javascript to change spans once a certain width is reached.
Related
I have a part-time job and I must code a website. I've got a graphics and graphical overview in .psd and the guy who is creating graphics told me "it is for 1140px bootstrap grid, make it in" and I don't know If I understand.. can you please help me to understand that? It looks like this:
LINK
From bootstrap's page:
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Large devices : Desktops (≥1200px)
Grid behavior : Collapsed to start, horizontal above breakpoints
Container width : 1170px
Number of columns : 12
Column width : ~97px
Practically it means that you should design it for a Desktop screen.
Here are pictures of the buttons. I wanted the buttons to show up together because without columns they were dropping down to a new line and it looked ugly. Now it works on browser, but not on mobile. I'm sure this is because I defined 3 columns and mobile doesn't have room. But when the browser resizes it moves the buttons accordingly. How do I get it to do that on mobile?
Browser:
Mobile:
Here is the code I used:
<div class="row">
<div class="col-xs-4">Online Reputation</div>
<div class="col-xs-4">Review Management</div>
<div class="col-xs-4">SEO & Web</div>
</div>
On mobile devices, the available width to display elements is usually too narrow to have multiple in the same row while still keeping their texts readable (ie. Not truncated, heavily shrunk down, or wrapping within themselves).
The most common solution to this problem is to display the elements side-by-side when there is available space to do so, but start to stack them after the screen shrinks below a certain width (by styling them using media queries). This is a key part of responsive design, since desktop layouts rarely translate properly to mobile devices. (See Changing the Page Layout Based on Breakpoints for more details on this.)
Bootstrap has breakpoints built into the framework, so there's no need to do any extra work for it. You have the options of xs, sm, md, and lg, which correspond to predefined ranges of screen widths.
You've already used the xs breakpoint in col-xs-4, which basically means that at every possible screen width, the buttons should be 4 units wide. But this doesn't display properly on narrow mobile devices, as you've noticed - so your next option is to go one width higher and use col-sm-4. Doing so would preserve the 4 unit width at any screen width of sm and above, but would stack the buttons once the screen narrows to the xs range:
<div class="row">
<div class="col-sm-4">Online Reputation</div>
<div class="col-sm-4">Review Management</div>
<div class="col-sm-4">SEO & Web</div>
</div>
Here's a demo to show you how that looks. Hope this helps! Let me know if you have any questions.
You need to change text size to something smaller and or less padding of the buttons for it to fit on mobile. Where is your CSS?
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; }
}
Okay so I am trying to get my website to fit all resolutions or screen sizes because I am currently working on a 17" 1920x1080 screen size and my website looks fine but when i try run it on a 10" or 15" screen etc the website screws up, the content goes everywhere (mainly drops down) So I was wondering how this can be fixed?
Thanks
First of all you should use percentage values (e.g. width:20%; instead of width:200px;) whenever you can, so you don't rely on absolute pixel resolutions (which often screw up your whole design/layout).
For all the other things and tuning you should take a look onto the css media query (e.g. w3schools):
#media screen and (min-width:1024px) {
/* ... */
}
It sounds like your web content isn't being positioned relative to a fixed width parent container, because if it was a scrollbar would load rather than your containers being pushed down. If you want to make the website layout respond to the screen size then you'll need to use a responsive layout.
Here's more info on getting started with responsive design/development:
http://www.w3schools.com/css/css_responsive_intro.asp
You can also look at using a framework which is really good for learning responsive grid lay outs (and much more). Bootstrap is one of the most popular mobile first responsive frameworks:
http://www.w3schools.com/bootstrap/default.asp
http://getbootstrap.com/
You could dive in learning few things:
Relative Lengths
Flexbox
Media Queries
Suppose I display thumbnails (~200px width each) in a web page. In a midsize screen (e.g. 15") I can display 5 thumbnails in a row.
Now what if I resize the browser window so that 5 thumbnails don't fit the page width ? I would like the number of thumbnails to be changed automatically to fit the page.
For example: suppose, 5 thumbnails with spaces between them take ~2000 px. Now I am resizing the window. When the page width becomes < 2000 px but > 1600 px. I would like to display 4 thumbnails in a row and so on.
What HTML/CSS markup should I use to achieve that behavior ?
I once made a fiddle to explain media queries to someone. You can use a similar design, although it's usually much simpler just to float:left or display:inline-block your elements and let the browser take care of the rest.
DEMO
One way is to use a responsive layout. Twitter Bootstrap provides the same by default.
Another way is by using #media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this:
Get the screen size using mediacheck and then set up thresholds using #media.
You can use the float property for this:
float: left;
Floating elements will wrap when they do not fit in the parent's width.
Example (try resizing the page)