Hi I need to know if there's any way of making all controls
of a column the same width, and that all these controls are as wide as the cells that contain them.
I added a demo on JSFiddle with the controls I'm using.
I tried using size for the input texts and style="width:"> for the selects , and even though I managed to make them the same width,(it doesn't seem to work in Chrome) it's kinda difficult , that's why I'd like to know if there is any more straightforward way to do the same thing
Any ideas or insights?
Give them all a class that makes them stretch to 100% width (e.g. class="element") and put them in a div with 30% width.
OR define a class with the property "width: 30%".
You can define classes in a seperate css file or a style tag in the head of your page.
css:
.element{
width: 100%;
}
div.container{
width: 30%
}
html
<div class="container">
<whatever class="element">...stuff.....</whatever>
<sample class="element">...more stuff...</sample>
</div>
Related
So I'm working on a quick portfolio and in mobile, the "email me" does not expand across the entire screen as it should, as seen on this screenshot.
I've fiddled around with content width, device width, etc. using numbers, percentages, text values, and nothing has worked to make this page perfect. I rewrote the code to be cleaner and still can't find my mistake. Is it just something I'm overlooking?
You can just view my source to get my code, since the CSS should be there.
UPDATE: I removed the navigation padding and changed all of the device-width values but now the navigation bar does not go completely across. I am very confused since the #navigation and #mobilecontact should essentially have the same widths. I'm using Safari on iPhone.
Can you add the browser and version that you are testing on, because Email me button looks fine for me (occupies entire width) in latest chrome - developer tools.
May be your browser didn't understand 100vw
If you are concerned about the clickable area of "email me" anchor text.
You can make the anchor as display:block, so that it takes up entire row
I think you are using mac safari browser and in safari browser "vw" is not supported so now you can use "px" or "%" and button will be expand.
I have checked.. you need to fix following this
First of all you should remove "width=500" from your meta, highlighted in below image.
Add following in your CSS to fix paddings
* {
box-sizing:border-box;
}
Instead of width: device-width use width: 100% and add more properties in #title . see image
Update CSS for #about, #experience, #skills to width:100%
and thats it you all are done.
Here is final result
All you need to do is to fix font-size
When you want to have a responsive design; you don't need to use specific Width for block level elements.
just
remove numerical width from body's children, then add
body,html
{
width:100%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
and then if you want to set padding or margin to viewport element; the standard way is just one element with specific class handle width like bootstrap container class
So I have managed to achieve the required result.
Basically the extra padding you are adding on <div id="navigation"> (padding-left: 350px) is part of the issue.
Also you are incorrectly using the device-width attribute value. One cannot specify the width of html elements using width=device-width;. Width attribute does not accept device-width as an acceptable value.
So replace that with width=100%; or width=100vw; everywhere you have used it. See here for documentation on responsive web design using viewport meta tag and device-width.
I was able to get the button to occupy 100% of the screen width by making these changes.
Remove padding-left: 350px from <div id="navigation">.
For <div id="title"> and <div id="about"> in the media queries for max-width: 500px, changing width from width: device-width to 100% or 100vw.
Here is the output. Let me know if it works out.
I'm curious to know how you resolve the following problem.
Using Bootstrap 3 with 24 columns and grid-gutter to 30px.
In wide display, I use col-7 for the sidebar left and col-17 for the main content. The problem is bootstrap is calculating the widths with percentage. So I have 339.5px (29.16667%) for the sidebar, and 824.484px (70.83333%) for the content.
<div class="row">
<aside class="col-lg-7">[sidebar]</aside>
<div class="col-lg-17">[main content]</div>
</div>
Now, I use some scripts like lazysizes and lazyaspectratio to lazy-load my pictures and have the image container kept the same dimensions even if the image is not already loaded. With lazyaspectratio, the width must be 100% to recalculate the height to keep.
BUT... because there is a but... if my main content is 824.484px width, the picture is 824.484px width too, and picture quality is bad. Assuming my picture display must be 824px, the final picture display is shitty and I lost quality, even if the ratio is respected.
My question is : how to bypass this problem with img > width=100% ?
I saw on several threads that people "fix" the width of the row children, like this :
div.row > aside.col-lg-7 {
width: 340px;
}
div.row > div.col-lg-17 {
max-width: 824px;
}
It seems a good solution to keep img > width = 100% and have integer columns width, but with this solution, I must add lot of css rules to manage for multiples col-* and multiples media-queries...
And you ? how do you solve this kind of problem ? Because I think using img-responsive class with width=100% cause quality loss on percentage based width with Bootstrap 3... I'm sure that I'm not the only one to encounter this problem.
Thanks in advance for any suggestion.
Andrejs: You can customize bootstrap at: http://getbootstrap.com/customize/
titouille: You could create a Javascript that rounds the images widths down based on their classes or parents.
For each image element you read in the width of the col or parent and set it (rouded down to 1 px) as it's max-width
Consider the basic HTML below:
<body>
Random HTML content
<div class="container">
<!--Some content loaded via ajax or the like -->
</div>
Other random HTML content
</body>
I want the width of the "container" div to be the MAXIMUM of three potential values:
100% of the window
1024px (for best visual appearance)
the width of the content
I have been able to accomplish #1 and #2 by using the CSS properties width:100% and min-width:1024px. I can also accomplish #2 and #3 by setting display:inline-block and min-width:1024px. However, I haven't been able to get all three: if I add in the width:100% to the display and min-width properties, it overrides the child content sizing effect of the inline-block display and gives me only 100% width, even when that means the content overflows.
I know I can hide overflow or give the div itself scrollbars, but what I want is for the div to expand as needed, or to the full width of the window, whichever is greater - but never narrower than 1024px.
Edit: Note that the content loaded in the div may be less than 1024px. The div itself, however, should never be less than that, as it would no longer blend nicely with the look and feel of the rest of the page.
You can achieve this by adding another div on top of first one:
<div class="container2">
<div class="container">
</div>
</div>
css:
.container2{min-width:100%; display:inline-block;}
.container{min-width:1024px; width:100%;}
http://jsfiddle.net/om10t3gn/4/
You can augment your second proposal with a virtual pseudo-element to achieve the dimensions you want without using javascript
.container {
min-width: 1024px;
display: inline-block;
}
.container::before {
width: 100vw;
display: block;
content: ' ';
}
Basically, it's adding a zero-height element to the top of your container that has the same width as your viewport, which is 100% of the width of <body>. So it adds #1 to your existing solution that already achieves #2 and #3.
And it doesn't use any javascript, and will stay correct with resizes.
I am not very skilled with CSS, but I think I have a solution for this problem.
To have a max-width in pixels and a max-with in percent at the same time, you could first calculate the width with the clamp-method (this includes the first of your two max-widths) and then add a normal max-width. The clamp-method is relatively new and not supported by old browsers unfortunately.
<div class='container'></div>
CSS:
.container{
width:clamp(400px,250px + 25vw,100%);
max-width:700px;
}
This should set a max-width both at 100% and 700px.
I have tested it on a notebook with Firefox and Chrome.
Use javascript to pick the largest value, use jQuery to assign that value to the width of the container div.
var window_width = $(window).width();
var container_width = $('.container').width();
var default_width = 1024px;
var max_width = Math.max(window_width, container_width, default_widht);
$('.container').css('width', max_width);
Hi I'm trying to create a Responsive Email Template.
I can't make the background images responsive.
Here is a sample of the images code:
a#learn-more { background-size: 100%; display: block; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/learn-more.png')no-repeat; height: 68px; width: 600px; margin: 0 auto; }
Basically We have the following images that I am having a hard time making fluid (responsive)
-logo (a#learn-more)
-banner image (.banner-img)
-learn more button (a#learn-more)
-image1 and image2
I have my demo here: http://jsfiddle.net/nLxjU/3/
Hope you can edit the code to see what my issue why I cant make them responsive.
I'm really stuck here.
You can use a different div with absolute positioning, and containing the image inside it with percentile width and height, so when the screen size changes, the div (and the image inside it) resizes, too. Just place the div below everything with z-index and you're done.
Email-clients, like Outlook (-Express), Mail (OSX) etc, all use different html-engines, and have a lot of restrictions. Especially Outlook seems to be using a limited IE6 based rendering engine. Background images and styling by css classes don't work, and forget about absolute or relative positioning.
Make sure the template also looks good in these email-clients, unless you only aim at mobile email clients (they seem to support all of this).
Take a look at the standards guide (html/css) at http://www.emailology.org/.
You can improve with the following, but as #Willem says you really need to change your approach if making an email template. Many email clients completely remove the head and strip out styles. Some support a limited set of inline styles for formatting and none for layout. In fact an old-school table layout with inline styles is generally the best way to go.
You might find some of this useful: http://www.campaignmonitor.com/guides/mobile/
As for making the best of what you've got so far:
Your .divider and .banner-img elements were set to 600px wide.
Set them as 100%.
Don't have the banner as a background image.
Size your .lpanel and .rpanel images as 100% of the parent's
width.
Demo: http://jsfiddle.net/nLxjU/
Here is a fiddle.
There is a standart trick with display:block; and max-width:100%; for responsive images:
img {
display: block;
max-width: 100%;
}
If I resize the width of the container, my image fits this width and also automatically resizes it's own height. This is very great image behavior! Also it doesn't use Javascript.
So, is it possible to do the same trick by resizing the height of the container? I want this image to fit containers height and also automatically resize it's own width proportionally. Of course, without any Javascript, just CSS or any experimental CSS3 features (I know how to do it with Javascript, really).
Add
max-height: 100%;
Also, try not to work with tables - they behave (more) unpredictably than other display types.
See here a most basic example.
EDIT: Couldn't find a way to do this without JS. I have put two methods for you in here - both could be used easily (I've used jQuery, but you don't have to). If that doesn't suffice, than good luck.