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
Related
To make my website responsive, I was going to use media queries to change the text size, etc. The problem is that I use bootstrap to set the sizes for the text. I was wondering if there was a way to use the classes from the bootstrap in my CSS file.
For example, something like:
.test {
font-size: display-5; /* display-5 is a bootstrap defined size */
}
I originally thought I could do this using an #import rule but it didn't work.
How would I go about doing this?
What i would do, is instead of relying on bootstrap, i would just do manual media queries instead like below
<div>
<p class="fontSizeClass">Your text here</p>
</div>
with the css being
#media screen and (max-width: 600px) {
.fontSizeClass {
font-size: 30px;
}
}
#media screen and (min-width: 601px) {
.fontSizeClass {
font-size: 80px;
}
}
bootstrap has sizes listed here:
sm `min-width > 576;`
md `min-width > 768;`
lg `min-width > 992;`
xl `min-width > 1200`
xxl `min-width > 1400`
I'm pretty new to advanced CSS. I have a custom heading section which i want to make centered on mobile only. I have added a class name and the following code but nothings happened.
.mobile-text {
text-align: right;
}
#media (max-device-width: 600px) {
.mobile-text {
text-align: center;
}
}
This is the homepage of this site and the paragraph is the following:
REAL ESTATE THAT CHALLENGES NORMS & ELEVATES EXPECTATIONS. THIS IS COLOURFUL THINKING IN A BLACK AND WHITE WORLD.
Your class on the website is .mobile-text, and it should be mobile-text - The . is only used in selectors to say that the following text is a class name
Also, your inline styles on the element ( style=font-size: 35px... etc ) is overwriting your changes - you can use !important to handle this lazily
.mobile-text {
text-align: right !important;
}
#media (max-device-width: 600px) {
.mobile-text {
text-align: center !important;
}
}
max-device-width will target the width of the entire device area (i.e the device screen). Instead use max-width, which will target the width of the entire browser area.
#media (max-width: 600px) {
.mobile-text {
text-align: center;
}
}
Note: device-width queries are deprecated.
When I check the html of your page I can see the class="" of this <h4>:
class="vc_custom_heading .mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"
In your css you want to manipulate it using the .mobile-text class. Problem here is that you define this class in your html using .mobile-text. That's actually wrong, you need to define it with only mobile-text like this:
class="vc_custom_heading mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"
The . is actually a css selector for a class like # is a selector for an id.
Your media query is not working on desktop if you are check in desktop view.
And also your class declaration is wrong please remove . from mobile-text. :)
max-width is the width of the target display area, e.g. the browser
max-device-width is the width of the device's entire rendering area, i.e. the actual device screen
Please use #media all and (max-width: 600px){}
For more details please visit here
Hope it will help you. :)
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.
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 was looking for a way to disable prettyphoto lightbox on mibile devices or any other small screens and after spending hours by trying different script, I discovered a very simple way to do that with css media queries:
html
<div>
<a class="lightbox" rel="prettyPhoto" href="img.jpg">
<img src="img.jpg">
</a>
</div>
css
#media all and (max-width: 479px) {
a.lightbox {
pointer-events: none;
}
}
But, I just like to know if there is a better (proper?) way? Is it better to use a JS functions ( ($(window).width() )? I want to be sure it will work on any devices. Thanks.
Just wrap it with:
if ($(window).width() >= 768) {
$("a[rel^='prettyPhoto']").prettyPhoto();
}
will work