I have the follow html in Angular2.
<div class="col-xs-12 col-lg-8" >
<p style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
In my view, the text is aligned at the left (as I wanted). How can I say that when is for col-xs-12 it has to be centred?
Thank you.
The best approach for this would be to create a specific class for you container and only use media queries to modify the text position on mobile.
Here's the general idea following the BEM CSS naming convention:
<style type="text/css">
.thing {
... some styles
}
.thing__title {
text-align: center;
}
// tablets start at 768px width
#media (max-width: 767px) {
.thing {
... some mobile styles
}
.thing__title {
text-align: left;
}
}
</style>
<div class="thing col-xs-12 col-lg-8">
<p class="thing__title">... some text</p>
</div>
No need to increase the loading time of your site by adding jQuery to add styles to an element.
Bad idea to target modifier classes from component libraries. Especially your grid as you might removing that or the class name could be deprecated in later versions leaving your site vulnerable.
Can you use jquery?
$('.col-xs-12').css('text-align','center');
There is a good explanation of Bootstrap 3 and 4 Media Queries here at Bootstrap 3 breakpoints and media queries.
Bootstrap provides a great deal of flexibility to your project, but from minute details such as text justification between breakpoints, you will need to add a media query to your own CSS and apply the styles as desired.
So you might try something like this:
<div class="teacher-info col-xs-12 col-lg-8" >
<p class="ta-xs-left" style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
<style>
// Default to center the paragraph to center
.teacher-info p {
text-align:center;
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
// When the screen is larger than a tablet, left align the text
.ta-xs-left {
text-align:left;
}
}
</style>
Edit
In line with martinsoender's answer, I agree you shouldn't target modifier classes, and should add your own classes. This edit is to show how I would do that.
Essentially, I would add a class to the parent to denote what holds (teacher-info), then give the element I want to modify a class. In this case I create a class that looks similar to a bootstrap class. ta-xs-left ({text-align}-{Xtra-Small}-{Alignment}), then it can be reused wherever you need it.
Related
I am a web front-end developer (newbie).
Hypothetically, if I am writing code for a web page using Twitter Bootstrap and want a responsive sidebar, I can do something like this:
<div class="col-xs-12 col-md-3">...</div>
Let's say, in the interest of separation of concerns, I would like the design people to decide how many columns wide the sidebar should be on each screen width.
Wouldn't it be better to do something like this:
<div class="sidebar">...</div>
and have the designer do something like this:
sidebar = col-xs-12 col-md-3
somewhere in the CSS?
Is this possible? Are there tools that will allow this? Am I way off base?
This is possible, with some help from a CSS preprocessor like the following:
Sass
.sidebar {
#extends .col-xs-12;
#extends .col-md-3;
}
Less
.sidebar {
&:extend(.col-xs-12);
&:extend(.col-md-3);
}
Hope this helps!
You should use a preprocesor to compile your CSS, and create semantic class from unit classes.
For example in Sass:
.sidebar {
#extends .col-xs-12;
#extends .col-md-3;
}
You can download Bootstrap in Sass on the offical website.
You can read the article "Using Sass To Semantically #extend Bootstrap", it can help you achieve what you want.
You propose instead of determining it in the html with a class on div like this:
<div class="col-xs-12 col-md-3">...</div>
determine it in the css with something like this:
.sidebar {
width: 100%;
#media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
width: 50%;
}
#media (min-width: $screen-md-min) {
width: 33%;
}
}
In any case you have to edit something: either html file or css file. Consider your project, to know which one is easier.
I would suggest to put columns into the html (it would be kind of default case)
<div class="sidebar col-xs-12 col-md-3">...</div>
and then, if needed, override it for specific pages in css with something like this:
.page-order .sidebar {
width: 33%;
}
I am wondering please what is the best way to move an element from one div to another in responsive design?
I have the current setup in my page:
<div class="container">
<div class="desktop"><h2>Hello I show on desktop</h2></div>
<div class="mobile"><h2>Hello I show on mobile</h2></div>
</div>
And then the relevant CSS media queries to either display the mobile or desk top version and it works...but is it the right way?
Try to design the page for mobile. Then add the stuff that's required for desktop. Share as much as possible and try not to duplicate content on the same page.
<div class="container">
<h2>Hello world!</h2>
<div class="desktop">
this is an extended block only visible on desktop
</div>
<p>
this text is visible from both
</p>
</div>
You can also try bootstrap http://getbootstrap.com - it does a lot - including dynamic resizing of images and columns. It's really worth trying - might save you a whole bunch of work.
There is no right or wrong way but the way you are doing it is perfectly suitable.
.desktop{
display:block;
}
.mobile{
display:none;
}
#media all and (max-width:400px){
.desktop{
display:none;
}
.mobile{
display:block;
}
}
Personally I only use one div and make it responsive.
.desktop{
width:100%;
font-size:1em;
}
#media all and (max-width:400px){
.desktop{
font-size: 0.7em;
}
}
Yes, you are doing it right. Use media queries for the two different classes like below.
.mobile,
.desktop {
display: block;
}
#media (max-width: 768px) {
.desktop {
display: none;
}
}
#media (min-width: 768px) {
.mobile {
display: none;
}
}
<div class="container">
<div class="desktop">
<h2>Hello I show on desktop</h2>
</div>
<div class="mobile">
<h2>Hello I show on mobile</h2>
</div>
</div>
I have a Form class="form-inline center" where class "center" is as following (in style section):
.center { text-align: center }
But I want this class "center" Not to be in effect on small to very small devices. Is there Bootstrap 3 syntax for that?
You can try using just media queries.
Something like,
#media only screen and (max-width: 320px) {
.center {
text-align : (your preferred style);
}
}
Here is a JsFiddle
Similar question : Bootstrap, pull-left for small devices
More information about device and screen sizes : http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Hope this helps.
use the .hidden-xs and .hidden-sm classes on <center> like this:
<center class="hidden-xs hidden-sm">
for more details check out official documentation here Bootstrap Responsive utilities
Are there known issues with Web Essentials and Bootstrap mix-ins? I am getting incorrect CSS (repeatable -- see my code below).
I am working with the bootstrap.less package and using Web Essentials to compile the less file to css. (VS 2013 + Update 1/Latest web essentials)
So, if I create a simple page like so, everything works:
that is, the 2 divs stack horizontally, until my browser window gets too small, then they stack vertically.
<div class="container">
<!-- this row uses no LESS-->
<div class="row">
<div class="col-sm-12 col-md-6">
<span>Div1</span>
</div>
<div class="col-sm-12 col-md-6">
<span>Div2</span>
</div>
</div>
</div>
Now, if I create this little block of LESS
#import (reference) 'bootstrap/bootstrap.less';
.div-container {
.make-md-column(6);
.make-sm-column(12);
}
And then change my code like this:
<div class="container">
<!-- this row uses the bootstap LESS mixin (css compiled with Web Essentials)-->
<div class="row">
<div class="div-container">
<span>Div1</span>
</div>
<div class="div-container">
<span>Div2</span>
</div>
</div>
</div>
It stops working -- specifically, the divs stack vertically, even on a medium or large width.
Now, I think that the LESS that I put in is exactly equivalent to the bare classes that I was using in my first snippet.
I think that the problem is that WebEssentials/Visual Studio is not compiling the LESS correctly.
I believe that is the problem, becuase if I look at the generated css, there are no media queries in it, but the bootstrap mixin file (mixins.less to be specific) specifies a media query for hte .make-xx-col mixins.
I'm probably not the first person to hit this, so I must just be doing something wrong. Is there a workaround? Have I mis-configured something? Is there some other LESS compilation solution that I should use instead of Web Essentials?
Reorder the mixins so the compiled css output doesn't override the selectors with larger min widths.
Less:
.div-container {
.make-sm-column(12);
.make-md-column(6);
}
CSS:
.div-container {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
#media (min-width: 768px) {
.div-container {
float: left;
width: 100%;
}
}
#media (min-width: 992px) {
.div-container {
float: left;
width: 50%;
}
}
#import (reference) 'bootstrap/bootstrap.less';
.div-container {
.make-md-column(6);
.make-sm-column(12);
}
I think this is a simple file import problem..Try Using
#import '../../../bootstrap/bootstrap.less';
Or Modify your code using '../../../' ..
This is an impotent thing...
Note :-
If you are using Web Essential ..Then you should import the files like this.Otherwise the .Less to .CSS conversion will not work..
#import "../../../content/bootstrap/variables.less";
#import "../../../content/bootstrap/mixins.less";
#import "../../../content/bootstrap/utilities.less";
I noticed this Q & A on stackoverflow here: how to specify a different image in css depending if the user visits on a desktop or a mobile browser
His HTML:
<img src="image.jpg"
data-src-960px="image-960px.jpg"
data-src-1260px="image-1260px.jpg"
alt="">
and CSS is:
img[data-src-960px] {
content: attr(data-src-960px, url);
}
I'm trying to incorporate this for webpage, but am failing miserably...
My HTML:
<div class="container">
<div><img src="images/header.jpg" data-src-mobile="images/header_mobile.jpg" alt="Philadelphia" /></div>
</div>
My CSS:
img[data-src-mobile] {
content: attr(data-src-mobile, url) !important;
}
I have an entire stylesheet devoted to mobile devices. But this doesn't work at all. It always loads up: images/header.jpg
Is the url parameter in the attr supposed to have something in there? I've tried replacing url with ../images/header_mobile.jpg, but that doesn't work either.
How do you use this? I can't seem to find much detail for this on the internet at all... :(
For what it's worth here are some References to people saying that this works:
Using CSS/HTML to Make a Responsive Website in 3 Easy Steps
Responsive images using CSS3
Use min-width, max-width, :after and content:url. For example:
#media screen and (min-width: 961px)
{
a:after {content:url("http://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-800x188.png");}
}
#media screen and (max-width: 960px){
a:after {content:url("http://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-426x100.png");}
}
<a tabindex="1"></a>
References
Stu Nicholls | CSS PLAY | Content: - CSS Gallery
CSS content and attr
content - CSS | MDN