Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 2, 2018 at 8:07 am #920143
    jualcald

    Hi,

    I’m trying to customize the Grid Row for medium to very small sizes, just like this website is doing.

    Already created to Grid Rows with excluding viewing sizes.

    * Large sizes: icon top – text bottom
    * Small sizes: icon left – text right

    But doesn’t matter the resolution the icon always appear on top, and text on the bottom.

    Here i’m attaching some pics in a shared folder to understand what I mean.
    https://www.odrive.com/s/ab39f85c-d638-4c24-a66e-2abf6eafe59d-5a98e8ef

    If anyone can help would be great
    Thanks!

    March 4, 2018 at 9:47 am #920993
    Vinay

    Hey jualcald,

    We have performed the below steps
    1. Enabled custom CSS class name support from Enfold > Layout Builder > Show element options for developers
    2. Gave the columns custom CSS class names “col-float-left” to icons and “col-float-right” to content.
    3. Added the below CSS to Enfold > General Styling > Quick CSS

    
.col-float-left {
	width:25%!important;
	float:left;
}
.col-float-right {
	width:75%!important;
	float:right;
}

    Please review the site and let us know if you have any questions.

    Best regards,
    Vinay

    March 4, 2018 at 9:09 pm #921151
    jualcald

    Hi Vinay,

    Thanks for the help, the floating element DO work!

    The only issue now is that when decreasing the window size, when it reaches cellphone resolution the right floating column starts “invading” the left floating column. (if you check it on the phone you’ll see)

    Even when making the fonts really small it kept happening, so it’s not a font size issue.

    Thanks!

    March 4, 2018 at 10:20 pm #921218
    Vinay

    Hi,

    Please try this CSS if you need more gap please adjust the width and margin values to suit your design :)

    .col-float-left {
	width:23%!important;
	float:left;
	margin-right:15px;
}
.col-float-right {
	width:72%!important;
	float:right;
}

    Best regards,
    Vinay

    March 4, 2018 at 10:46 pm #921232
    jualcald

    Hi Vinay,

    Applied a margin-right: 10%; and worked like wonders ;)

    Thanks, you can close the thread!

    March 4, 2018 at 10:48 pm #921233
    Vinay

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘GRID ROW: element don't respect internal columns when resizing to ipad size’ is closed to new replies.