Maielstrom
-
Posts
13 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Maielstrom
-
-
47 minutes ago, tuanphan said:
Hi. What should it look like?
Hello and thanks for replying! Using the page as a reference beginning with the drawing row (after the 3rd white line divider), I currently have (left to right) Image - Text followed by Text - Image on desktop. When viewing on mobile, it vertically loads as:
Image
Text
Text
Image
So, I am trying to reverse the order of the second row so it views as:
Image
Text
Image
Text
I had thought I could use flex and flex-direction as I did on another one of my pages; however, altering that code is not working for this instance so I'm not sure if this is possible or if I might be using the wrong selector.
For reference, this is the code I was trying (I tried adjusting the nth-child parameter and no number yielded any type of reaction on the page - I also tried testing the code by using it to shut off row visibility but also received no reaction):
@media screen and (max-width:767px) {
div#page-62ce2c8c4b497007840bec21 .span-12>.row:nth-child(6) {
display: flex;
flex-direction: column-reverse;
}
}
-
5 hours ago, anon123 said:
Hi! Thanks for the reply. I'm in the same situation, I had this problem on my home page a few months ago with the image cards and I was able to fix it, but I think this is a different case. Over here, I've used individual image blocks and text blocks, and I can't select them as a row.
I believe that might be the same thing I am experiencing as the page I detailed where this works is an instance of image galleries and text whereas the new page I noted where the code is not working is individual image blocks with text blocks as you have too.
I haven't received a reply on the thread I made, but if a solution shows up there, I'll come back here to update as well!
-
I have this same question for my site that I also have
text-image
image-text
and it displays on mobile vertically using left to right, resulting in text image image text when I want text image text image.
I had this on another one of my pages I built out a year or so ago and was able to address this using flex boxes; however, altering the same code for my new page is not having any effect to fix the issue. In my case, I think I may be using the wrong selector (even though I am using the same selector as the page that is working, but respective of the page I'm trying to fix)
For reference if you want to try utilizing/altering the code I had past success with (but isn't working on my new page):
@media screen and (max-width:767px) {
div#page-5f5a5511bba4a15636d690f3 .span-12>.row:nth-child(6) {
display: flex;
flex-direction: column-reverse;
}
}
Where the number inside the child parentheses reflects which row on the grid you want to reverse. The div#page would also need to be adjusted to reflect your page. (Found by viewing page source and searching for id="page-)
The issue I think I am currently having is with the div#page - the above code works on the page from about a year ago, but altering this to reflect the new page I am building out has no effect, so I'm not sure what is going on there.
-
Site URL: https://www.ericsdream.world/motorcycle-signal-indicator
Hello everyone,
I am seeking assistance with how I can reorder the display order for mobile of my page here - https://www.ericsdream.world/motorcycle-signal-indicator. Currently, the mobile display orders everything vertically based on left to right; however, I want to have the text first followed by the images, so I would need to reverse the display of rows 2, 4, 6, and 8. I attempted a few code alterations I found utilizing flex and flex-direction but I couldn't seem to get this to work. Any thoughts?
Thanks!
Reorder Stacking on Mobile
in Customize with code
Posted · Edited by Maielstrom
Magnificent, thank you for this! This did work and I was able to find the respective selectors to adjust throughout the page. (After consideration I was looking for text first then image, so just the matter of selecting those rows for column-reverse instead)
Thanks again!