Viewing "Interiors" Theme - Content 2 responsive row
"Interiors" Theme - Content 2 responsive row
|
User: Aristomenis X. 7 years ago
|
|
| In the new template "Interiors" in the third responsive row (Content 2), the Image is on the left and the text section is in the middle of the right part of the responsive row. How is that done? I tried to copy the settings and everything. Anyone help please? | |
|
User: Roddy 7 years ago
|
|
|
These widgets use flexbox to arrange the content. The default responsive row widget has the justify-content selector set to "center". The widget in the template has the justify-content selector set to "space-between" and the "image" is fixed width. Unfortunately, users can't get at these styles as they are inserted inline in the head code of the page HTML doc. I guess you could overwrite them if you know how. A more suitable setting for a balanced layout would be "space-around" which would be more like the layout used by the Side Info widget. ------------------------------- 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: Aristomenis X. 7 years ago
|
|
|
Hey Roddy! First, of all thank you for the answer! Both "space-between" and "space-evenly" would indeed have a more balanced layout, and if need be, I could indeed overwrite the css. There are actually selectors inside the software to change the "justify-content" selector (Although named differently: "flex-start" -> left etc etc) The thing is, I can't understand how it looks the way it does! With the flexbox (#flexbox_6) having "justify-content: space-between" the two items should be locked on either side of the container? So to the left and right edge. But the the text box widget (div: #text_box_11) is centered in the distance between the image and right hand side. There is not "self-align", no padding, no margin, not even a border in the css. The div itself is not "display: flex" and I can't understand how it is possible the way the css looks? Finally as mentioned in the previous post, I tried to replicate the effect inside Everweb and just couldn't... what would happen was what should normally happen when the "justify-content" selector is set to "space-between". The image to left and the widget to the right edge of the flexbox. Help please? |
|
|
User: Paul-RAGESW 7 years ago
|
|
|
Hi Aristomenis, The way that works is taking advantage of how the Justify setting works in browsers for the Responsive Rows. You can't see it, but there is a small, transparent shape in that Responsive Row. It is aligned to the right, up against the right margin of the page. This causes the first image shape to be left aligned, the second text section to be centered, and the small, transparent shape to be right aligned. To duplicate this you would; 1. Set the Responsive Row to Justify under Horizontal Alignment 2. Add your two shapes you want displayed 3. Add a third shape as the last item in the Responsive Row 4. Select the third shape and set the background color to No fill under Inspector->Shape options 5. From the Metrics tab set it to be as small as possible, maybe 5 by 5 pixels. Now the third shape will align right which forces the first shape to align left and the second shape to be centered. Hope this helps! Last edit 7 years ago ------------------------------- Paul EverWeb Developer |
|
|
User: Aristomenis X. 7 years ago
|
|
|
Oh Wow! Really didn't see it! it's actually 1px x 1px! Should have read the code a bit more in detail... thank you Paul! It helps a lot! |
|
| Post Reply |
| You must login or signup to post. |