Viewing Placing many Flexboxes in a Responsive Row?
Placing many Flexboxes in a Responsive Row?
|
User: Ole V. 4 years ago
|
|
|
What I'm looking for is a way to create a newspaper style look, where each topic consists of a picture and some text, where clicking on either the picture or the text takes the user to a full article. This should work on both desktops and phones, of course, because on a desktop the user could see three of these picture-text-boxes on a wide screen, but on a phone the same boxes would only be shown one at a time. I've tried various ways to achieve this, but one problem I've come across is that they don't always align well when I do this. Also, isn't there something about not using Flexboxes inside Responsive Rows? What's the best way to achieve this? |
|
|
User: Paul-RAGESW 4 years ago
|
|
|
I would use the FlexBox to achieve this. You can add the Image and then text underneath for each article in the Flexbox. You can put FlexBox's, or a Text Section, in the Responsive Row to do this as well, but just make sure the width is set the maximum width you would want on the smallest device. ------------------------------- Paul EverWeb Developer |
|
|
User: Ole V. 4 years ago
|
|
| Thanks. I need all the boxes to have a fixed width and height. Not at my computer now, but is that possible? I know I can do this with text boxes, but it’s easier to deal with flexboxes.l, and whenever I have tried they tend to end up with different sizes. | |
|
User: Paul-RAGESW 4 years ago
|
|
|
Quote: Thanks. I need all the boxes to have a fixed width and height. Not at my computer now, but is that possible? I know I can do this with text boxes, but it’s easier to deal with flexboxes .l, and whenever I have tried they tend to end up with different sizes. The FlexBoxes will be different sized based on the content you add in there. I think we have a widget coming out that does fixed heights. I will have to confirm. ------------------------------- Paul EverWeb Developer |
|
|
User: Ole V. 4 years ago
|
|
|
Thanks - with fixed heights and fixed widths, they will behave properly inside a responsive row . If it won't be possible to have both fixed heights and widths, a page will easily look messed up once someone changes the width of the browser. It's great if you'll implement that solution, because a lot of online newspapers, magazines etc is using that concept. ETA: I hope the other bugs will be fixed as well. For instance, it's difficult to edit text in the new and larger text editor because it shows the correct font colour but not the current background colour. An area with white text on black background will appear as white text on light grey background in that editor. Also, if I want to change eg. the size of some text in the normal, little text editor, it will only change the size of some of the text, even if all of it is selected. Last edit 4 years ago |
|
|
User: Roddy 4 years ago
|
|
|
There are quite a few widgets that do this that have been available for a while! Check out THIS page for various examples of responsive rows. THIS page leads to quite a few row widgets which have the option of a slide up animation. Most of these will maintain responsive width and equal height despite varying amounts of content. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Ole V. 4 years ago
|
|
|
Thanks, I'll check them out. Do they do everything the Flex Box does? The FlexBox finally allows text editing in a larger window, they allow free color choice for texts links and background per FlexBox and more. ETA: I had a look at these links and I'm not sure if I've found any yet which does what the built in Flex Box does + the stuff I mentioned which the Flex Boxes don't do yet I need boxes which can have fixed width and height – and handle articles with a lot of text, so text formatting icons are needed, and ways to create links (to internal pages or external stuff) need to be doable without entering any kind of code in the text. Here's an example of something similar to what I look for – except that the boxes don't seem to have a background with a user definable color that surrounds both the text and the images, like the Flex Boxes do: https://www.information.dk Here's another one: https://www.gp.se Btw, the width has to be fixed. If a page is based on modules that are either eg. 250 or 500 wide, then full with can show; three boxes, or 1 narrow + 1 wide, or 1 wide + one narrow ...without looking messy. If a user is reading this on a large screen, he should be able to make his browser less wide without anything being messed up visually. Last edit 4 years ago |
|
| Post Reply |
| You must login or signup to post. |