-
Posts
-
Hello dear enfold team,
maybe I have better luck this time and someone could help me with an responsive design issue,
i have been waiting for a week now without an answer, but ill try it again.:on my first page Welcome I want a better text alignement ( on the phone display)
pls put the first section text in 2 columns, one left align ,one rightalign, pls bring the 2second section description text than upwards, keep 1 cm distance between the upper text.
i sent you the imgur link belowHey barabasone,
Thank you for the inquiry.
Try to apply a unique class name (Advanced > Developer Settings > Custom CSS Class) to the 1/5 column elements containing the descriptions, use “description-column” for example, then use the following css code to adjust the width of the columns on mobile view.
@media only screen and (max-width: 767px) { .description-column { width: 48% !important; margin-left: 1%; float: left; clear: none; } }// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support
But due to the columns’ predefined styles, the layout might look a bit different compare to the screenshot.
Another solution is to create another set of text description or specifications that is fully configured for mobile view. You may need to place all text and the required html structure in a single text block and apply the custom styles accordingly. Using css flex might be of help in this case.
// https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The html structure might look like this.
<div class="left-column"> descriptions or specifications here</div> <div class="right-column"> descriptions or specifications here</div>Best regards,
Ismael
- You must be logged in to reply to this topic.