I have an interesting problem that came up more than once. I'll present the last one and uploaded both of them to my server.
I'm taking a tuts+ course about responsive webdesign and as the guy has set 20% for creating 5 grids + 2x5px padding between them, it didn't work to me unless I changed the 20 to 19%.
This is my code:
/* WIDTH SETTING */
.nav-hold,
.image-grid,
.container {
width:95%;
max-width:1000px;
margin:0 auto;
}
/* IMAGE GRID */
.image-grid,
.form-container {
overflow: hidden; /* because inside the grid, we'll flow elements */
padding: 5px;
}
.image-grid-square {
float: left;
width: 19%; /* each img container's width (5*)19% */
overflow: hidden; /* because inside the grid, we'll flow elements */
padding: 5px;
}
.image-grid-square img {
width: 100%; /* the img inside the container can be 100% big */
float: left;
}
The only change in his code is the width:20%; (at least what I noticed)
If you guys want to inspect the code deeper, here is my version: http://purpost.me and here is his version: http://purpost.me/tuts
Why his 20% for 5 grids or 25% for 4 grids works perfectly and mine doesn't? :) I'm learning CSS and have a short amount of time to get to know the most of it to use it in a big project. I want to understand the behavior of layouts to be able to build an any type of site. I know frameworks such as Bootstrap, but the command is to use our own codes, so I'm learning as fast as I can. :)
In the course the 300x300 pictures became 188x188, but when I tried it with 20%, mine was 200x200 .. now with 19% its 190x190. I don't understand.
I understand most of the key factors of responsive web-design unless this grid question. I assume I should read a lot about it and try and try and try and in the end I'll be comfortable using it.
I appreciate any help, thanks in advance!
Other guy is having reset.css file where he has some css definitions which you are not using. That is why your UI behaves different.
Related
So I have two tabs, I used mui tabs for that. For the first tab I display the ingredients, in the second tab I add new ingredients with different forms. I have different fields for each form so whenever I click on one form to open ( I use a mui split button to select and open different forms) , forms open with its width ( sometimes it jumps to center with smaller width, sometimes covers the whole tab). It looks bad. I want to make it a fixed size like 500px then everything looks good. But then for mobile usage or in different small-size components (I want to reuse the who tabs component), 500px doesn't look okay. I need to scroll to see whole form. I tried 100% or fit-content didn't work. My CSS looks like this now.
#formContainer {
width: 500px;
height:480px;
margin-top: 20px;
}
#media only screen and (max-width: 800px) {
#formContainer {
max-width:fit-content;
height:fit-content;
}
}
I am not good at CSS so maybe I am missing something basic? I try to look for it but I don't even know how to search about my problem. What would you suggest? Thanks
It's a little difficult to know exactly what you are going for. What I did on one of my angular projects is using a fixed position with a percent value
#formContainer {
position: fixed;
width: 500px;
height:480px;
margin-top: 20px;
}
you also may want to change it to be a class and not an ID since it will be re-used in more than just a single element.
Secondly, you can keep your current values, but also use max
#formContainer {
width: 500px;
max-width: 50%;
height: 480px;
min-height: 50%;
margin-top: 20px;
}
For some reason min-height seems to do the same as max-width.
I'm not a CSS expert so hopefully you can get a more precise answer on the hows and whys. I am simply a fellow sojourner suffering in the world of CSS.
No matter what screen size I use, the Sidenav is always the same size. I tried adding attributes such as
- flex
- flex="85" (to get 85% of its container)
Can't seem to find a good approach.
In angular material, md-sidenav has these attributes:
width: 304px;
min-width: 304px;
That's why the width will be fixed at 304 px no matter what device you use.
So if you want to change your sidenav width you'll have to change the css a bit.
If you're fine with supporting only modern browsers, you can change it to a vw measure (1/100th of the viewport width) and add it to a separate css file. The code will look something like this:
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 200px !important;
width: 85vw !important;
max-width: 400px !important;
}
Here's a plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview
The answer submitted by user3587412 allowed me to change the width but I was having the same problem as Craig Shearer with it killing the animation. So I tried a few different things and came up with this.
md-sidenav.md-locked-open {
width: 250px;
min-width: 250px;
max-width: 250px;
}
I'm not sure if that is the proper way but it seemed to work for me.
Thanks to user3587412 I could find easily the required styles.
To get the md-sidenav to adjust to a flex parent just override
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 0px !important;
width: auto !important;
max-width: none !important;
}
After trying different CSS in this thread I end up with :
md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
width: 200px;
min-width: 200px;
max-width: 200px;
}
I'm currently on angular-material 1.0.8 and tested with Chrome 50 only.
With this CSS what works for me :
Animation close and open OK
When locked OK
When not locked OK
In case anyone comes here using the latest mat-sidenav, you can explicitly set the width on the the element.
mat-sidenav {
width: 200px;
}
The docs caution against using percentage based sizes.
https://material.angular.io/components/sidenav/overview#setting-the-sidenavs-size
Here's a somewhat "jank" solution, but it doesn't mess with the animations at all. The sidenav automatically resizes itself in order of the items inside it to fit perfectly. As such, you can just add a span with the width of your choice to the mat-drawer to set a minimum size. Note that this only works to set a minimum width, and not a maximum width.
<span style="height: 0px; width: 200px; display: inline-block;"></span>
I came across this issue, as well -- even though the 304px width is plenty, I had a card in the content area to the right that was squeezing the sidenav. So, using the flex grid I was able to add <md-sidenav flex="15" class="md-sidenav-left ... to get the width I wanted without overriding CSS. It sounds like this didn't work for you, so maybe it has to do with the layout options in your design...
I have searched and searched. Fiddled and tweaked. Spent hours trying different suggestions and code ideas...
How can I have the content on my webpage, be centered horizontally with regards to the browsers view port. No matter what I do, I always end up with uneven margins and it is quite noticeable.
The closest so far is:
#MyStyleName
{
margin: 0 auto;
width: 90%;
}
However, because I am using a percentage, no matter what I do with margins/alignment it just defaults to being on the left edge of the page.
extra info:
My issue relates to the top-level, most outer page element. The very first or that holds the content of everything else.
I am not sure what you are asking, but here is a example of af centered <div> with a percentage with.
I also added border-sizing: border-box which enables you to use padding.
#MyStyleName {
margin: 0 auto;
width: 90%;
display:block;
background:red; /* Only for testing */
box-sizing:border-box;
padding: 10px;
}
<div id="MyStyleName">
Hi!
</div>
If your #MyStyleName is a block element, then it should work. If not, then it's not gonna work. In such case you can add display:block; to the selector style.
I am using fixed layouts however when I see my layout in
android tablets and phones the layout is breaking for some
reason.
Please visit http://www.iamvishal.com/pureecn/
and notice the top navigation "open account, customer support and select language"
In the desktop it looks fine however the top navigation breaks in mobile browsers.
I am suspecting its the margin them.
#main_links_list_1,#main_links_list_2,#main_links_list_3
{
margin-right: 65px;
position: relative;
}
Pretty much things are breaking because you have half of your layout "fixed" and the other half "fluid".
For example:
div.section {
margin-left: auto;
margin-right: auto;
width: 960px; /*fixed*/
position: relative;
}
#main_links_container {
float: left;
width: 80%; /*fluid*/
}
Also note that when no width is set for an element, the default is auto.
Open your site on a desktop and try resizing the browser window you will probably see the same issue that you're seeing on mobiles and tablets.
If you really want to avoid media selectors you could try changing this-
html, body, #page {
height: 100%;
}
To something like this-
html, body, #page {
width: 1200px;
margin: 0 auto;
}
Use a media query in your CSS for greater control on mobile devices-
#media screen and (max-width: 767px) {
#main_links_list_1,#main_links_list_2,#main_links_list_3
{
margin-right: 15px; // reduced amount for mobile devices and tablets
position: relative;
}
}
Ensure this is BELOW the current CSS otherwise it will get overridden
There are a lot of reasons your site could be off in mobile/tablet.
1 ==> Create a fluid layout for non-desktop
2 ==> Make sure your meta viewport is correct (include retina display and Android dpi)
3 ==> Optimixe your images for mobile
4 ==> beware of position:fixed on older iOs and Android devices. Does not work as expected.
Can you explain a little better what is breaking?
You assumed wrong. YOu need responsive layout and not fixed!
I suggest you take a look at zurb foundation v4.
Your problem may be cause in the section Professional Solutions the last link is quite long, which breaks the layouts.
Try this in your css file:
#professional_solutions_list {
max-width: 180px;
width: 100%;
}
see the following screen to get what I meant (the red line is where your menu should reach, the blue line is where it is actually):
Update
The following state is the default one, with the problem as occurred in tablets, please notice the applied rules:
And this one after adding max-width: 180px, the problem is solved:
I edit the css rules live, using FireBug
EDIT:
Upon your comment, I've checked the website again, please remove:
width: 94%;
from the div with the id: secondary_links
Although a responsive layout like zurb would be advisable - the quick fix lies in applying a
min-width: to your page-wrapper element
I'm trying to make a fluid grid layout and I've run into a problem with inconsistent width rendering in Opera. In Opera the width of elements are consistently smaller than the other browsers. I'm trying the fluid 960 grid system but if it wont be consistent then I may change to fixed sizes.
Does anyone know how I can get Opera to render the width the same as the other browsers?
Here is the CSS and HTML I'm using for this demo
.show_grid {
background: url(../img/grid.gif) no-repeat center top;
}
html, body{
margin: 0;
padding: 0;
}
.container {
width: 92%;
margin-left: auto;
margin-right: auto;
max-width: 936px;
padding-top: 15%;
}
.box {
width: 15.633%;
background: #006;
color: #999;
margin: 5% .55%
}
<div class="container show_grid">
<div class="box">2 column - browser name</div>
</div>
Opera rounds percent widths but it doesn't round percentage values for paddings and margins.
So, the easy way is to set the width: 15%, and add padding-right:.633%. But doing so, only the block would be bigger visually.
If you want to have it's width fair so all childs would have the same width, you'll need to add another wrapper and add the appropriate negative margin to it. It is calculated by this formula: 100/width*padding, in your case: 100/15*0.633. It would compensate the padding and everything would be cool.
Here is a fiddle with all the variants: http://jsfiddle.net/kizu/8q23d/
— fixed width in pixels, block with width:15.633%, first visual fix and the proper fix at the end.
Dealing with different box models could be very tricky and time consuming.
I definitely suggest you to avoid dirty CSS hacks that will not validate your css files.
You could try to drop the use of percentage values and go for an "elastic" layout.
In this case you specify the min-width and max-width for your block elements.
An article about elastic layout is here and something more here
In alternative you could detect the browser via javascript or via library and use conditional CSS files.
This is my favorite approach when dealing with IE.
conditional css is a library that will help you with that, but there are many more options in the web.
Good luck