Is it possible to prepare different styles that change page layout depending on the information if the content of a page is "long". I want to enable CSS3 columns when content is long and disable them when content is short.
How do you define "long"? It's open - it can be a certain amount of paragraphs, a number of pixels etc.
A similar media query that can change styles depending on the browser window width:
#media only screen and (min-width: 1278px) {
/* code for wide-screen window */
}
I want to use pure CSS and no JavaScript if possible (with JavaScript it's simple - I'd just add a class after measuring page offsets).
As far as I know there is no way with a media query
The w3 specification for the height attribute specifies that is is not for actual content-height but rather than browser height, similar to the width attribute.
I would go with a quick JS solution exactly as you described.
Related
How can I change the order of photos and text in Squarespace so it views one way on desktop, but reorders on mobile? I've seen similar questions to this so I've tried my own code but it's not changing anything.
I have index pages that balance the layout of the one above it on desktop (section1 = image on left/text on right, section2 = text on left/image on right)
On mobile the flow is backward (section1 = image on top/text on bottom, section2 = text on top/image on bottom).
webpage is: www.northcountryarmory.com/fort-knox
This is indeed a rather common need on Squarespace sites (and has been for years). Unfortunately, Squarespace doesn't currently offer any mobile-specific block layout options.
Furthermore, each site's layout is different enough that it makes writing a universal bit of CSS difficult. It is a case-by-case basis.
In your case, you can target a specific page (via the collection id on the body element) and then target every evenly-numbered index-page section. Note that targeting in that way will only affect that page, and only the index sections on that page.
Insert the following LESS CSS via the CSS Editor / Custom CSS:
#media screen and (max-width: 640px) {
#collection-5db8b183ea3e1a49745ba89a .Index-page:nth-child(even) {
.sqs-row {
display: table;
}
.sqs-col-6:last-child {
display: table-header-group;
}
}
}
The above doesn't use flexbox, but uses CSS tables instead. In your case, that requires less code and will be more broadly compatible. Flexbox is another way to do it, though. To use flexbox, set the parent element to display:flex and then use the order CSS property on the children within the context of a media query, similar to the above.
For others who may read this, you'll likely need to ask a new question for your specific site/context (and be sure to mention the code you've tried).
You can use flexbox for this in two ways. Flexbox lets you reverse the order if that's what you're looking for (this is my understanding of what you wrote). Alternatively you can also use flex order to manually change the order of specific elements on the page.
I am working on a layout that needs precise media query handling. One of my issues is the crossbrowser scrollbar width as it is different according to browsers and most (all of them?) include it in the window width.
As we can see in these 2 examples, the media queries don't act at the same window size with and without the vertical scrollbar :
Test without scrollbar
Test with scrollbar
In the first example, you can see the background color change exactly at 800/700/600px window width.
In the second examples with the scrollbar the colors change at :
Chrome and firefox : 779/679/579px
IE : 783/783/583px
That makes a difference of up to 21px.
Is there is a work around by ignoring the scrollbar in media queries and focus on the available width itself.
If not how do you handle this issue, do you fix a maximum width for the scollbar and include it in the media queries?
-- UPDATE --
I am searching for best practices/solution with CSS as I would like to avoid JS for this project.
Look this example: http://stowball.github.io/mqGenie/
It is working fine both in Firefox and in Chrome for me (with scrollbars).
You can download and read more about this plugin here: https://github.com/stowball/mqGenie (~2.2 kb)
One of sources: https://stackoverflow.com/a/21414947/2898694
Enjoy.
Eight years later (2023), container queries are supported in most browsers and come to the rescue!
Instead of using a media query (which, as you found, reports a window width including the scrollbar), we declare a 'containment context' on the html element
html{container-type:inline-size;}
... and then use a container query to get it's width (without the scrollbar):
#container(max-width:600px){
body{background:gray;}
}
I've updated your example 'Test with scrollbar' using a container query approach (leaving html and javascript untouched).
I want to apply a class on image elements, but only for those which got a landscape format.
So, I want to know if there is a way to select images on my html, having a width/height ratio greater than 1, just like the media queries do with the "device-pixel-ratio" filter.
I actually do this in Javascript, but this can be better to do it in css (or with css framework like less/stylus/sass etc..)
Thanks for your help
Media queries inspect the user's screen properties, which is why it can select for screen width and even retina displays. To read the properties of the images themselves would not be possible in LESS or CSS.
LESS and its compiler, whether client-side or server side will just compile to CSS so there's nothing inherent in LESS that will read your HTML, let alone images.
CSS would get you closer, but reads your HTML semantically, not looking at the inner properties of media elements like images or video.
I have seen the option of loading different css files[called responsive web designing] for different screen sizes. But I want to know if there is some other way through which I can keep the CSS uniform.
I have to adjust the width of a title bar that should be of the same size as browser window with some margin-right
<toolbar width="some px value" margin-right="some px value">
I need some spacing at the end of the browser screen
Can I somehow get the current width of the browser screen and thus adjust my titlebar accordingly
"toolbar" defaults to being displayed as "inline". Try using "block". See this fiddle.
But I don't think "toolbar" is a valid html tag-name (I might be wrong). In any case old versions of Internet Explorer have a hard time figuring out what to do with certain tags (like most new semantic html5 tags) and won't apply any css to them.
If you feel the need to use new semantic tags and still need legacy browser support I recomend using Modernizr. Including it at the top of your page will use a small browser hack to get support for these tags even in old browsers.
I'm building an editor where the content of a post is loaded in a div, and jQuery selectors allow me to edit the content inline.
I just ran into a bit of a hurdle as I was trying to add some responsiveness to the styling of the templates:
in my template stylesheets, I use a specific id of the preview area to specify where the style should apply. I apply the same id to the body tag of the viewing of the post so that both the preview in the editor and the full view of the post look the same.
I was putting in some media queries on the view side of things and realized that on the preview page, something like #media screen and (max-width: 640px) will behave differently because the preview does not take up the entire width of the screen.
Is there a way I can use a media query selector other than the width of the screen, but instead the width of an element.. or something equivalent?
Or could there be another way of mimicking that behaviour simply with javascript..
Unfortunately there is not currently a way for a media query to target a div. Media queries can only target the screen, meaning the browser window, mobile device screen, TV screen, etc...
Update (2018):
This is still a common problem for many developers. There is no way without javascript to query the size of an element. It's also very difficult to implement in CSS because of the 'cyclic dependencies' it causes (element relies on another to determine its size, element query causes size change in child which causes size change in parent which causes size change in child ETC...)
There is a great summary of the current element query landscape.
The go-to solution these days is the EQCss library https://github.com/eqcss/eqcss, or handling the changes within a javascript framework like React or Vue using a "CSSinJS" type solution.
My old and hilariously janky "solution":
For now I am using:
.preview {
zoom: .8;
-moz-transform: scale(0.8);}
when the .preview div is 80% of the page width. It's generally working, but with a few issues, and it is not entirely flexible since the divs in question will not always be set % of the page width.