I have a website with a section with 3 columns, it's responsive and the columns switch from horizontal layout on desktop to being stacked vertically for mobile. This is fine but I have a problem where the columns become different heights from each other if the user changes the font size in their browser. Is there a way to force the column heights to remain even?
Here is the site:
http://www.1wevents.com/
It's the about us section. It's really, really annoying me. I guess I can add media queries to switch to vertical stacking earlier before the screen gets as small as mobile but is there a way to switch based on the font size in the browser?
Many thanks,
Tony
Related
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; }
}
Maybe this is a very simple question, but I am wondering if you can setup multiple layouts based on window size, and have them apply based off the users current window size?
Right now I use bootstrap with C# and I set one standard size like col-md-#, and then let everything below that just fall apart into pieces as elements start overlapping. This makes the site at least readable on small screens but it is still a mess since everything is all broken apart.
Example md/lg layout
moving to a smaller screen (sm/xs) then breaks those elements into pieces, which cascade vertically.
What I am wondering is if I can maybe setup a col-xs/sm-12, and then re-arrange the elements (or re-size items like images/tables/divs) to better suite a smaller screen. Basically have/display different layouts when moving from different screen sizes.
Is it possible that instead of just breaking the elements apart (like above) for smaller screens, to in fact run a different style for smaller screen sizes (below)?
TLDR: Does bootstrap currently support multiple layouts that are determined by window size, rather than having just one layout, and breaking everything apart for anything smaller?
If so, can a simple example be given showing two layouts being enacted by different window sizes.
Yes.
If your using bootstrap 3, you can simply define the layout for xs, which will then scale up until something bigger takes over.
for example
col-xs-6 col-md-12
col-xs-6 col-md-12
col-xs-12
col-xs-12
So when its on xs, it will display as 6 columns, then medium up will display on 12 columns.
The above is better described here http://getbootstrap.com/css/#grid
you can also use push/pull to adjust the ordering http://getbootstrap.com/css/#grid-column-ordering
i'm trying to create a portfolio kind of style layout, with different widths for the columns.
The issue i'm having is that the layout breaks in the row that has a 5col div on the left and a 7col on the right.
When it's the other way around (7col | 5col) it seems to work fine. That's a weird behaviour.
Does anyone know why this might be happening?
To demo this bug, just resize your window.
http://codepen.io/anon/pen/lqsgC
Cheers,
Thales Macedo
It doesn't exactly "break", what happens is actually intended behavior.
You are using the .col-md-* which means that columns will be formed only if the viewport is "medium" as defined by TBS3. Otherwise, they will stack. This is what you are observing because resizing the window eventually leads to a small (or extra-small) viewport and the columns will display stacked.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
If you would like for the columns to always show up, you need to use .col-xs-* instead.
This is a follow-up question to one I asked before:
"CSS - elements position when the window size changes".
The issue was - How to avoid the elements from being pushed aside when the screen gets smaller.
The answer was - use static width.
Static width indeed solves the problem, however it causes another problem (now we get to my follow-up question):
Let's say I use a picture as a background for the headline of the site and another one for the footer.
On the one hand I want them to always take the whole screen width but on the other hand I don't want them to be pushed aside when the window displaying the site gets smaller.
Using static width will cause different display in different browsers or in different versions of the same browser - will not always take the whole width. (there isn't one static width value that is good for all cases)
Using width: 100% seems to be the solution but then I find myself where I began.
How can I accomplish both?
Thanks.
This is the reason that we have css media queries and max-width, max-height attributes
Media queries allow you to change the css depending on how big the screen size is. Plus they can do a lot more.
http://www.w3schools.com/css/css_mediatypes.asp
What I would do is design your site with max-width: someamount, and width: 100%. Once your finished, then worry about making it look better on smaller screens.
Designers usually go one of two ways when designing a responsive website. Either design for desktop size screen first, then adjust for the smaller sized screens towards the very end. OR design for mobile sized screens first and then the larger screens towards the very end.