I am prototyping a few mockups for my site and have decided to use Foundation. Foundation has a feature that easily allows you to hide page elements when the view port is less then 768px. The strange thing is, then when I apply the .hide-for-small class to an element is shrinks the element by about 10px on all sideds. It does not appear to be adding padding or margins, rather setting a new view port size only on that element. this is most notice able when I apply the .hide-for-small class to elements with 100% widths.
Can anyone help shed some light on this?
I see your code, but have some problem. You added 'columns' and 'hide-for-small' classes to wrapper div that is incorrect. You have to use 'columns' and 'hide-for-small' class in a 'row'.
For example your code have to be like this:
<div class="row">
<div class="large-8 hide-for-small columns">
...
</div>
<div class="large-4 hide-for-small columns">
...
</div>
</div>
Related
https://jsfiddle.net/jonathansh1115/oc75f0sr/
I read about many posts of the width would not be 100% and people always say
body {
margin=0;
padding=0;
}
will work but loooook at this!!
ps:i am using the bootstrap link there
Well, there are lots of issues with your code.
Firstly you are not using bootstrap properly. You have to add the CSS file also. Bootstrap will not work if you only include the js file. Once you include it then everything will work just fine.
The spacing around divs is because of the browser defaults. If you include Bootstrap they will just disappear. Also, you need to use bootstrap classes properly.
In my opinion, you should go through Bootstrap's documentation and then create your layout. http://getbootstrap.com/getting-started/
If I understand your problem you want that your 3 blocks have a 100% width. Here they have a 100% of 33.33% of your page because you have col-sm-4.
Try to replace by :
<div id="all">
<div class="row col-sm-12" id="hqllo"><h1>hqllo</h1></div>
<div class="row col-sm-12" id="nook"><h1>nooook</h1></div>
<div class="row col-sm-12" id="pro"><h1>pro</h1></div>
</div>
remove this in css
.row {
width:calc(100%/3);
}
jsfiddle
The code is linked below with JSFiddle.
The problem was when I decrease the screen size the div blocks should be in the same line with decreased width instead they are going one below the other. (once check it by increasing the screen width).
The other one I want to highlight is that the code for showing
read more option for text/paragraph when we decrease the block size. That is when we click on read more the block size should increase and show the remaining text. It would be very helpful if someone suggests code for this.
The code is
.center{
float: none;
padding:0px;
margin-left: auto;
margin-right: auto;
}
div.allign{
height:170px;
margin:15px;
text-align:center;
}
div.content{
height:200px;
background-color:#fff;
background-color:#F4F1EE;
}
<div class="container-fluid">
<div class="row-fluid content">
<div class="col-md-1 "></div>
<div class="col-md-3 allign">
<h3>Get Started</h3>
<p>How it works?</p>
<p>It's very easy and simple,just sign up for free and get started with your account.
It's easy to reserve or cancel a book from anywhere.</p>
</div>
<div class="col-md-3 allign">
<h3>About library</h3>
<p>location,Directions,Books info...</p>
<p>Total books:1124<br />journals:130<br />.</p>
</div>
<div class="col-md-3 allign">
<h3>No text books?</h3>
<p>Dont worry here we go...</p>
<p>Reserve your books from online by just one click.
Read online/offline by downloading pdf files.</p>
</div>
</div>
</div>
Click here for a JSFiddle example
https://jsfiddle.net/nvpqfxbj/6/
Thanks in advance.
You are using the "md" grid size on those elements so they will become full width below 991px. If you want to maintain the columns on all devices, then use the "xs" columns.
Instead of 'col-md-3' and 'col-md-1' use 'col-xs-3' and 'col-xs-1'. However, you don't need the empty first column because BS address it with offsetting columns.
Also, the margins set from .allign will override the margins BS uses on the columns and you'll have problems unless you remove it. If you need the margins, use another container div nested inside the col-* containers.
BOOTPLY EXAMPLE: http://www.bootply.com/EfOZtUQqcs
This is the basic principle all responsive grid systems are built upon and you're going to struggle unless you understand this basic concept. It's all covered in the BS3 documentation.
http://getbootstrap.com/css/#grid
As for your "read more" problem. The code you provided is not the culprit. There is something going on server-side or JS that is causing this and you've provided no server-side or JS code.
This works for me.
Bootstrap 5
<div class=".container-fluid">
I am currently using the bootstrap scaffolding/grid system as follows:
<div class="row-fluid">
<div id="insta-shop-filter" class="span2 visible-desktop">
</div>
<div id="insta-shop-grid" class="span10">
</div>
<div>
As you can see I added the visible-desktop to insta-shop-filter so that this will disappear on non-desktop. However what I wanted to do is that when this disappears I wanted insta-shop-grid to have a span12, so it takes the full width. Is there a way to do this without having to use javascript/jQuery and listening for window events?
You can use CSS3 media queries to toggle your styling on different devices. In this instance, you might consider writing a media query based on a 640px or 480px device width that does something like the following:
#media screen and (max-device-width:640px){
#insta-shop-filter{
display:none;
}
#insta-shop-grid{
width:640px!important;
}
}
One small note here, using !important is discouraged.
In bootstrap 2 (which it appears you are using) I don't think there is an easy way to do this without overriding the style with a custom CSS media query (like #Conqueror suggested) or adding/removing classes in javascript.
However I just want to point out that this is baked into Bootstrap3 by using col-SIZE-SPAN as documented here. In your case it would be.
<div class="row-fluid">
<div id="insta-shop-filter" class="col-md-2 hidden-sm">
</div>
<div id="insta-shop-grid" class="col-md-10 col-sm-12">
</div>
<div>
My requirement is, if a developer type some text anywhere on the web page without a specific tag (<p>, etc) the font size should be same as <p> tag's font-size.
In foundation.css I've changed the html,body { font-size:0.85 }. With this edit, the whole layout (whole site template) is getting shrink. Increasing the size is causing vice-verse.
Is there any other way to introduce our own default body font-size to foundation safely without harming the template?
Is there any suggestions to achieve my requirement without introducing a new font-size attribute to the content wrapping div?
Zurb uses the font size that you have specified in the html, body {} style to calculate the width of the site. Whatever you set the font-size value to becomes 1em throughout the site. If you look further down in the css you will find a definition for .row {} which looks something like max-width: 62.5em.
As you can imagine, when you make the value of 1em smaller, that 62.5em value for rows is going to get smaller as well. I don't know much about modifying it with the css version of zurb as I have always used the sass gem but you can adjust the number of ems for the row width.
Try:
desired site width / body font-size in px = number of ems your row max-width should be.
e.g.
If you want 960 width with a base font size of 12px
960 / 12 = 80
So you would set you row max-width to 80em.
I'm sure someone better qualified will come along and give a better answer but that is how I understand the grid.
It looks like you aren't using sass, so this won't help this particular person, but if one were using sass, take note of this comment in the foundation source code of components/_variables.scss:
the typical default browser font-size is 16px, that makes the
calculation for grid. If you want your base font-size to be
different and not have it effect the grid breakpoints, set $em-base
to $base-font-size and make sure $base-font-size is a px value.
(emphasis added)
so before you import any or all of foundation sass files, you would write something like this:
$base-font-size: 12px;
$em-base: $base-font-size;
note: "the typical default browser font-size is 16px" from the above. Foundation uses normalize.css, and that normalize will set that as a default.
Don't modify foundation.css but instead define your own style in your own "separate" css file. If you do this for example:
body {
font-size: 1.5em;
}
And have the following layout, you will see that the grid still responds to the width of your device/browser.
<div class="large-12 columns">
<div class="row">
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
</div>
</div>
See it in action here
The simplest solution I can think of would to be create a wrapper element around your content areas (or the whole page) and changing the font size as follows:
<div class="content">
<p>My stuff</p>
A button
</div>
Then in your CSS:
.content * {
font-size: 90% !important;
}
Untested, but I'm fairly certain I've done something similar in the past.
I'm developing a small vCards website. I'm using the Twitter Bootstrap LESS files as a base for the responsiveness and the grid.
I had an issue before, the grid wasn't responsive (Stack Overflow question) and based on the answer I realized that I had to include the responsive.less file together with the bootstrap.less file in order to get the responsive features.
After having fixed that issue, I still get more weird behavior:
<div class="headline-container pull-left">
<div class="headline-inner">
<h1>Roland Groza</h1>
<h4>Frontend Developer</h4>
</div>
</div>
Inspect the DOM and look for the above markup. Now if you start resizing the window down to the least it can go, between 410px and 514px, you will notice that the markup will inherit some CSS that is supposed to be applied for the MQ rule #media (max-width: 480px) { }, but just a part of it, as Twitter Bootstrap also has some CSS for that rule which is only applied when going beyond 410px and not above.
Did someone encounter the same behavior before, and if so is there a fix for it?
EDIT : The CSS changes that you should look for is the font sizes and margin / padding on the headline :
<h1>Roland Groza</h1>
<h4>< Frontend Developer /></h4>
The above text will be the one which behaves a bit weird.
If you are talking about the <h1> heading not being responsive, you can use slabText or fix it with an wrapper.
your html is not what you post , it is
<figcaption class="headline-container">
<div class="headline-inner">
<h1>Roland Groza</h1>
<h4>< Frontend Developer /></h4>
</div>
</figcaption>
And I can't see any query that states 410px (the one you say should be applied when "going betond 410px ")
Can you comment what is the rule that should be applied and isn't ?