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.
Related
This is a hypothetical question, as I haven't really written any HTML code in years. Provided you have an HTML page, and its content is semantically structured (so you have your main content in a <main> and <article> tag etc.), you would probably have your ads as one of the last elements in your source code, as they will semantically be least important. Financially, however, they would be rather crucial, so you'd like to have them displayed at the top of your page, above the "fold" (maybe in a right-hand column or "sidebar").
Is there a way to "push"/move an aside or div container (holding your ads) up in a sidebar/column, just using CSS - without having to absolutely position them?
Would you position them relative to the containing element (that forms the column), then add margin-top to the element that would be next visually (i.e. first child of the column element - say your navigation)?
Is there a way of doing this if you don't know the height of the "ad" containing element in advance (say because it's containing text, not an ad)?
Is there a way of achieving this, nowadays, with the latest HTML and CSS features? Or is visual design still dictating markup structure after all? :)
It's possible in CSS3 using display: flex-box and order: # to reorder how elements display, but CSS3 only works in modern browsers.
It doesn't make sense to do this when the ad will always be in a specific place, though. Save yourself and others the confusion, and keep HTML in charge of layout.
Is visual design still dictating markup structure after all?
This question sounds backwards. "Does markup structure still dictate visual design?"
No, that ended with the rise of CSS2 positioning.
You can use JS to create a widget and position it wherever you want in the layout, or create the ads as separate templates and use JS to retrieve and position them. This will work in almost any browser.
For the most part if your requirements are simple then it will be easier to simply place the ad element where it is required in the markup.
Visual design does not directly dictate markup, but designing markup with layout in mind makes life easier.
WordPress already allows us to create multiple menus and edit their items. I would like to offer one kind of menu (with more items) to my users coming from desktop browsers and a more condensed menu to user-agents which reveal that they are using mobile browsers.
My theme is already using a responsive menu which shrinks it when the screen size is too small, but I'd like to take it one step further, since I have a bit too many options in my main menu to make for comfortable browsing on mobile.
If you are only to subtract elements, not add anyone new, I would go about this using pure CSS.
An example:
#media screen and (max-width: 700px) {
.menu_element1 {
display: none;
}
}
If by 'one step further' you mean displaying a totally different menu, not just subtracting, but also altering or adding new elements, you could probably create several menus and load the correct one using wp_is_mobile(); Althought from Codex it seems this is not recommended, since tablets are considered mobile devices - and probably isn't bulletproof in other aspects either.
A third alternative would therefor be to use Javascript to determine the screen size and load the appropriate stylesheet.
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.
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.
I'm trying to create a couple of static HTML pages for demo purpose. I decided Less 4 CSS framework
For now, I have two pages to demo:
Login page: contains a header and a login form at the center of the page.
Usual suspect page: header, footer, main content.
I don't know how to partition Less grid to fit my requirements. How to divide and partition Less 4 grid?
I'm learning it too. As far as I know, LESS framework and its successor http://framelessgrid.com/ require you to manually write the CSS and HTML first. Then you use Joni Korpi's LESS to adapt it for mobile devices. Will update you as I progress myself.
Check out this answer. Basically, every element is set to certain column widths using .col1, .col2, etc
How to effectively use the Frameless grid?
And I asked this question to understand LESS css.
How to read this LESS css?