I am having a problem with some new CSS due to an update of our plugin. The page in question is here: https://www.renophil.com/event/ghostbusters-in-concert/
Basically from the title below the image down to the share icons should be a left column. Then the description that starts with "Kick off your Halloween weekend..." should be a larger right column.
We are using Wordpress and Visual Composer. The left column uses the class of vc_col-sm-4 and the right uses vc_col-sm-8. These are set to have the correct widths and work on mobile devices.
.vc_col-sm-4 {
width: 33.33333333%;
}
.vc_col-sm-8 {
width: 66.66666667%;
}
The problem is that the plugin we use for the events (The Events Calendar) has this CSS rule:
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
order: 1;
width: 100%;
}
which is overriding the width of my columns mentioned above. I thought I could fix it with width:auto but it didn't work. Is there a way to cancel it or do I have to add !important to the .vc-col-sm-4 and .vc-col-sm-8 code?
Try adding specificity to the classes controlling the widths when that overriding events class is present. This should help get you in the right direction.
#media (min-width: 768px) {
.tribe-events-single > .tribe_events .vc_col-sm-4 {
width: 33.33333333%;
}
.tribe-events-single > .tribe_events .vc_col-sm-8 {
width: 66.66666667%;
}
}
The CSS rule:
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
order: 1;
width: 100%;
}
has a greater DOM precision and has priority. You can use !important as you said:
.vc_col-sm-4 {
width: 33.33333333% !important;
}
.vc_col-sm-8 {
width: 66.66666666% !important;
}
or add Additional CSS from the theme preview mode and target the id element #tribe-events-content
div#tribe-events-content div.vc_col-sm-4 {
width: 33.33333333%%;
}
div#tribe-events-content div.vc_col-sm-8 {
width: 66.66666666%;
}
Related
I have div element:
<div class="...">...</div>
So when window will be sized to min width and style hidden-xs apply, I need to add few more classes to my div.
After window sizing it should be:
<div class="... margin-top padding-top">...</div>
How to add these condition in to css?
p.s. Maybe it is possible to do directly in html by Angularjs?
You can't dynamically add/remove classes in CSS.
What you could do is dynamically add/reset styles, with #media queries.
Let's say all targeted elements have a class called .target-el.
All you have to do is:
set .target-el.margin-top rules for both small and large sizes.
do the same for .target-el.padding-top.
instead of removing a class, set the rule to auto, none, 0 according to the default value for that rule.
I've set the class .margin-top along with a target marker class .target-el so you could still have your default .margin-class working properly elsewhere in your code.
Here's an example:
.target-el {
width: 50px;
height: 50px;
background-color: #ccc;
position: absolute;
}
.target-el.margin-top {
margin-top: 0;
}
.target-el.padding-top {
padding-top: 0;
}
#media screen and (max-width: 700px) {
.target-el.margin-top {
margin-top: 10px;
}
.target-el.padding-top {
padding-top: 5px;
}
}
<div class="target-el padding-top margin-top"></div>
From Bootstrap code, the .hidden-xs code is the following:
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
It uses a media query to be applied (screen > 767px). Instead of manipulating the DOM with JavaScript, I would suggest to use the same media-query on your classes:
<div class="... margin-top padding-top">...</div>
#media (max-width: 767px) {
.margin-top {
margin-top: 10px;
}
.padding-top {
padding-top: 10px;
}
}
I don't see a need for js likely, I would create new css for it:
<div class="hidden-xs margin-top-xs padding-top-xs">...</div>
use a media query css selector:
#media (max-width: 767px) {
.margin-top-xs {
...
}
.margin-padding-xs {
...
}
}
You can try to implement it with CSS specificity. Something like either of the following:
#MyDiv1.hidden-xs,
#MyDiv2 .hidden-xs{
margin-top: 10px;
padding-top: 10px;
}
<div id="MyDiv1" class="hidden-xs">
</div>
<div id="MyDiv2">
<div class="hidden-xs"></div>
</div>
stead implement it with CSS 'specificity'. Something like:
In order to add custom classes depending on a media query, you can use javascript.
This can be done with window.matchMedia, or by using a library like Enquire.js.
If you don't want to look for the media query that was specified in the bootstrap framework you could also use an [attribute*=value] selector to detect all the classes that contain the "-xs" characters, and depending on that to add custom properties for the rest of classes.
div[class*="-xs"].margin_top {
margin-top: 10px;
}
<div class="hidden-xs margin_top">The first div element.</div>
<div class="visible-xs margin_top">The second div element.</div>
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
I am using jquery UI datepicker against a div so I can see the months on my screen. The issue is that it seems to add a width attribute that is much wider than it actually needs which creates this extra white space as seen below
here is my code:
HTML
<div id="myCalendar"></div>
Javascript:
$("#myCalendar").datepicker({
numberOfMonths: 6,
showButtonPanel: false,
beforeShowDay: function (date) {
var dateString = $.datepicker.formatDate('yy-mm-dd', date);
if ($.inArray(dateString, highlightDateArray) > -1)
{
return [true, "highlightCell", ''];
}
else
{
return [true, '', ''];
}
}
});
from looking in firebug, I see
element.style {
display: block;
width: 102em;
}
which is way longer than necessary (having it at 82em; would be fine)
What is the best way of eliminating this white space?
The issue is that it seems to add a width attribute that is much wider
than it actually needs which creates this extra white space..
Reason:
This is the way jQuery UI has been designed.
It uses a magic number 17 to calculate the width of the container.
From the code of jquery UI v1.11.4 js at line numbers 4561 thru 4574:
var origyearshtml,
numMonths = this._getNumberOfMonths(inst),
cols = numMonths[1],
width = 17,
activeCell = inst.dpDiv.find( "." + this._dayOverClass + " a" );
if ( activeCell.length > 0 ) {
datepicker_handleMouseover.apply( activeCell.get( 0 ) );
}
inst.dpDiv.removeClass("ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4").width("");
if (cols > 1) {
inst.dpDiv.addClass("ui-datepicker-multi-" + cols).css("width", (width * cols) + "em");
}
It checks if the number of columns (months to show) are more than 1, and calculates the width as (17 * cols) + 'em'.
Rest is taken care of by the core CSS. There are styles ui-datepicker-multi-2 thru to ui-datepicker-multi-4 which have predefined width in %. This causes the inner .ui-datepicker-group to fit within the width calculated in the Javascript code and applied in the same line (see js code above). If you see the core CSS, you will find that it is styled only for only upto 4 months across. If the number of months exceed 4, then the width is not applied to .ui-datepicker-group (although the relevant class is applied via js) and hence they do not expand to the entire width of the container.
From jQuery UI v1.11.4 css at line numbers 333 thru 341:
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%;
}
You can see that classes for ...multi-5 and beyond are not defined.
What is the best way of eliminating this white space?
Recommended solution:
Simply add more classes as required in your custom CSS. This is the recommended way (also suggested in the response here: https://forum.jquery.com/topic/datepicket-problem-with-width-when-showing-multiple-months). And also the cleanest solution.
Just add the following lines to your custom CSS:
.ui-datepicker-multi-5 .ui-datepicker-group { width: 20%; }
.ui-datepicker-multi-6 .ui-datepicker-group { width: 16.666%; }
.ui-datepicker-multi-7 .ui-datepicker-group { width: 14.285%; }
.ui-datepicker-multi-8 .ui-datepicker-group { width: 12.5%; }
.ui-datepicker-multi-9 .ui-datepicker-group { width: 11.111%; }
.ui-datepicker-multi-10 .ui-datepicker-group { width: 10%; }
.ui-datepicker-multi-11 .ui-datepicker-group { width: 9.0909%; }
.ui-datepicker-multi-12 .ui-datepicker-group { width: 8.333%; }
This will take care of all possibilities up to 12 months across. Add more classes if required, as per your use-case.
For the sake of completeness, here is a demo:
Snippet:
$("#myCalendar").datepicker({ numberOfMonths: 5, showButtonPanel: false });
.ui-datepicker-multi-5 .ui-datepicker-group { width: 20%; }
.ui-datepicker-multi-6 .ui-datepicker-group { width: 16.666%; }
.ui-datepicker-multi-7 .ui-datepicker-group { width: 14.285%; }
.ui-datepicker-multi-8 .ui-datepicker-group { width: 12.5%; }
.ui-datepicker-multi-9 .ui-datepicker-group { width: 11.111%; }
.ui-datepicker-multi-10 .ui-datepicker-group { width: 10%; }
.ui-datepicker-multi-11 .ui-datepicker-group { width: 9.0909%; }
.ui-datepicker-multi-12 .ui-datepicker-group { width: 8.333%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="myCalendar"></div>
And a customary Fiddle: https://jsfiddle.net/abhitalks/u07kfLaa/1/
Note: Do not attempt to change or forcibly override the core jQuery-UI CSS (unless it is absolutely unavoidable). This is not a recommended best-practice. You may end up with unexpected problems, e.g. like this artefact (shown in red circle) visible in the screenshot below, when you force the components inline-block:
And then, you will end up adding more overrides fighting that and possibly get more problems. Try to keep it clean.
It looks like a jQuery UI design oversight to me - I can't think of a reason why that extra whitespace would be intended. As you said, the widget has a fixed width in em, so this isn't just an issue of the default behavior of display: block.
In any case, we can eliminate that extra whitespace with the following steps:
Set display: inline-block and width: auto on the datepicker widget so its width shrinks to fit its contents.
To each individual calendar element, remove the float and use inline-block positioning instead (set float: none and display: inline-block).
Set white-space: nowrap on the datepicker widget. This keeps all the months on one line, preventing them from wrapping onto a second line.
We will also need to use !important on a few of these rules to get them to override the rules from the default jQuery UI stylesheet.
Here is a screenshot of what the final result looks like:
Here is a Live Demo of the code in action:
$("#myCalendar").datepicker({
numberOfMonths: 6,
showButtonPanel: false
});
.ui-datepicker {
display: inline-block !important;
width: auto !important;
white-space: nowrap;
}
.ui-datepicker-multi .ui-datepicker-group {
float: none !important;
display: inline-block;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="myCalendar"></div>
And a JSFiddle Version of the code: https://jsfiddle.net/cjpmyp1j/1/
As a side note, on the off-chance you were planning on setting inline styles because you are unable to include a stylesheet in your document head, look into using a scoped stylesheet in your document body alongside the jQuery UI element.
I've made a mediaquery and, strangely, some of the new css properties work and other don't...
working : .ctas and .footer-content
When I use the chrome inspector, I doesn't even detects the mediaquery for the classes not working...
You can see the page I'm working on here : http://sopureinthecity.fr/test/
#media screen and (max-width:570px) {
.ctas {
width: 270px;
}
.footer-content {
padding-top: 20px;
}
.img-reponsive {
margin-top: 40px;
}
.main-title {
top: 30%;
width: 100%;
font-size: 18px;
}
.modal-btn {
top: 48%;
}
}
What did I do wrong ?
Thanks in advance !
EDIT, so everything works in the browser, but my .large-header is all bugged when I visit the website on my phone !
The responsive of the .large-header only works on the desktop (with a phone screen size)
You have typos in your css selectors when compared to the site you have linked:
.img-reponsive vs .img-responsive
.modal-btn vs .modalbtn
Nothing is wrong with the media query. The issue is a typo:
.modal-btn {
should be
.modalbtn {
As the CSS class used in your page is modalbtn.
In my application, I have a left sidebar which I want to hide when the user prints the page.
I am using the following media query :
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin: 0 !important;
}
}
i am hiding the sidebar, that works, but canceling the left margin on the wrapper does not work.
It works when I display the inspector and activate the emulation for css print with chrome and opera, it does not work if i press ctrl+P.
Do you have an idea of what I could do ?
I assume that the original css rule you have set is "margin-left: 50px" as an example of 50px. Try the same way in your media query like this "margin-left: 0". I think it worked for in the past. Might not be the best solution but it will probably get you going.
CSS
#page-wrapper {
margin-left: 50px; /* as an example */
}
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin-left: 0; /** try without !important, if doesn't work, then add it back.**/
}
I Hope that helps.