So it's only been out for a very short while, but I was wondering if anybody had any idea to stop Foundation 5 from being responsive?
We have a theme which relies on Foundation 5, however a new client wants to use the theme, without it being responsive. Any ideas?
you can modify the sass variables that set the breakpoints that define the media queries, just set them to extreme values so that they do not trigger. This will provide very poor ux on devices with small displays. Another solution would be to match all of the grids, so if you have a .large-12 then add .small-12 .large-12 for each instance.
Here are the defaults pulled from the zurb foundation docs:
$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em);
$screen: "only screen" !default;
$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;
$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
You can modify the css media queries using Sass which will be quite easy i guess than using media queries with css.Simply remove or set the same numbers on all the resolutions.
thanks.
Related
I have a modelform in which i've added a taggitselect2 widget as part of django-autocomplete-light.
This looks up tags from taggablemanager to allow an autocompletion. The autocomplete is working fine - but the alignment of the text inside the select box is off. The text aligns with the bottom of the select box, leaving a big gap between the top of the tag and the top of the select box. Easier with a picture:
https://imgur.com/a/WxFMLfF
forms.py
widgets = {
'tags': autocomplete.TaggitSelect2(
url='recordings:recording-autocomplete',
attrs={
'data-placeholder': 'Start typing to autocomplete...',
}
....inside def __init__
self.helper.layout = Layout(
Row(Column(Field('tags')),css_class='form-row'),
I've tried looking at styling options - this is a bootstrap project so ideally i would like the same styling you get with data_role="tagsinput" but if i assign that to the widget i guess it overrides the custom part and i get some broken output.
Couldn't work out why the default rendering is so poorly formatted so as a workaround I've just overridden the css.
On inspection, the selection elements have a 5px margin, enough to align them with the bottom. Hence applying the following in css:
.select2-selection__choice{
margin-top: 0px !important;
}
'fixes' the problem. Without '!important' it gets overridden to 5px, so this is required.
I've built a website using a purchased template and Joomla. I have a corporate logo which shows up perfectly on desktop. It comes up way too big on mobile. This is the following code I have entered.
<p><img src="images/Logomakr_7azv9e.png" alt="" width="100%" height="100%" /></p>
How would I write an if statement so that logo/picture only shows up on desktops and not mobile? Or perhaps to make the logo appear, just smaller?
As others have noted, CSS is the best way to do this.
HTML
Add a class to your image so you can target it and remove the height and width values:
<p><img class="logo" src="images/Logomakr_7azv9e.png" alt="" /></p>
CSS
Set the default values for the size of the logo
.logo{
width:100%;
height:100%;
}
Use #media queries to hide the logo on mobile, adjust the viewport from 767px to whatever you prefer
#media (max-width: 767px) {
.logo{display:none;}
}
You do have other options though. You mention that the logo is too wide on mobile, so instead of removing it completely you could also make it smaller:
#media (max-width: 767px) {
.logo{
width:30%;
height:30%;
}
}
Good luck!
I am now using django ckeditor as a WYSIWYG editor for adding product information,
previously I was using Summernote, but after moving to production the widget would not display in my template (at all, just a big white space) so I decided to try ckeditor.
However with django CKEditor all I see is a normal textarea, rather than the WYSIWYG editor.
The source code from the template is as follows:
<div class="col-sm-2"> Description:</div><div class="col-sm-10"><div class="django-ckeditor-widget" data-field-id="id_description" style="display: inline-block;">
<textarea cols="40" id="id_description" name="description" rows="10" data-processed="0" data-config='{"toolbar_Basic": [["Source", "-", "Bold", "Italic"]], "language": "en-us", "height": 291, "width": 835, "toolbar": "Full", "skin": "moono", "toolbar_Full": [["Styles", "Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker", "Undo", "Redo"], ["Link", "Unlink", "Anchor"], ["Image", "Flash", "Table", "HorizontalRule"], ["TextColor", "BGColor"], ["Smiley", "SpecialChar"], ["Source"]], "filebrowserWindowWidth": 940, "filebrowserWindowHeight": 725}' data-external-plugin-resources='[]' data-id="id_description" data-type="ckeditortype"></textarea>
My installation process was very simple: install django-ckeditor, (jquery already), add to installed apps, collectstatic, change the widget in my modelform, refresh server.
I am sure there is a simple thing I am missing here but I have no idea what it could be!
Any ideas?
You didn't mention if this is in admin or custom view.
If this is in a custom view check that both the widget .js file and jQuery are linked correctly in your page.
If it's in admin you probably don't have jQuery linked there and should add this to your settings.py:
CKEDITOR_JQUERY_URL = '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
If both do not help share what errors your JS console gives you
Does anybody know how to change the size of the fonts appearing in tags of the tag-it plug in? I went over the stylesheet but it does not seam obvious to me how to do it.
It is in the color specifc css file, tagit-stylish-yellow.css for example.
Look for
ul.tagit { cursor: text; font-size: 14px; color: #333; }
and change the font-size.
I found this by going to the demo site in Chrome, start the inspector by pressing F12, selecting the tag and looking at the css directives that affect it.
I have a Django view that renders a piece of text and word wraps it. I am using the below CSS. When I convert the same to PDF using PISA, I dont see the word wrap and text is lost.
Do I need to set any properties on PISA for this?
{
margin-left: 20px;
padding: 0;
font-size: 12;
font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
color: #333;
word-wrap: break-word;
}
Keep in mind that Pisa does not use CSS itself, it just implemented some of the CSS syntax and properties to apply its own rules in PDF generation.
See the section 6, Cascading Style Sheets, of the manual for the supported properties. And take a look at this nice manual, that is a little bit more detailed.
It's hard to find good documentation about pisa.