-
Posts
-
Hello.
I’m with a problem with the grid.I’m testing two versions of the same layout in this page: http://www.linchen.com.br/automate-traders/
The first one is using Color Section, which works fine, but the image in the right side is displayed too small.
However, when I try using the Grid Row, the image at the right is displayed in it’s correct size, but when I see the page in a larger screen, the left content is not “centered” to the page… It’s displayed to the extreme left to the page.
So I would need to correct this: I need the way it looks in the Grid Row for a regular (macbook pro) screen size: everything in the middle of the page, but the image with it’s correct size.
How can I make the left content of the Grid Row to align to the right?
Regards from Brazil
(Excuse my English).
Newton
I made screenshots so you can see what I’m talking about:
https://www.dropbox.com/sh/rh8kknuip4iktdn/AACpEHXWF-ITbXowqfAliKn9a?dl=0
Notice that in the large screen everything in the left column is aligned in the left of the page, and not at the right of the column, to ge centralized to the page.
The thing is: how do I align “right” the content of the Grid Row’s left column?
Thanks in advance.
Hi,
The original dimensions are 600×337 and depending on the screen width, it will be resized automatically. So, my suggestion to you is adding a custom class in your image following this article: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and replace this image with the following custom CSS code at Enfold Theme Options > General Styling > Quick CSS
@media only screen and (min-width: 1280px) { .customClass { display: none !important; background-image: url('new_image_resized_link') !important; background-repeat: no-repeat !important; } }You need to change the screen width and the “new_image_resized_link”.
Best regards,
John TorvikHello,
The issue is NOT with the image (notebook picture)!
The issue is with the content on the left!
I need this content to be aligned horizontaly at the right of the grid column/cell.
This way it will be “centered” in larger screens.
How can I do this? Align right to the grid?
Newton
Hi Newton,
I need this content to be aligned horizontaly at the right of the grid column/cell.
I am not sure I understand what you mean by this sentence. Could you please explain a bit more? Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaHello,
I really thought it was clear in the pictures!
You see, I’m using the grid row to have a text (as heading) and icon list at the left column (grid cell), and an image at the right column (grid cell).
So in the left grid cell I have text + icon list, and in the right grid cell I have an image (notebook).
In a regular screen, such as the MacBook Pro, they remain in the center of the page, so as a “group” both grid cells content is in the middle (horizontally) of the page.
But in a larger screen (such as a DELL 27″), although the image on the right grid cell remains aligned “left” to the grid (so it is in the middle of the page, horizontally, because the line that divides the grid row in two cells is in the center horizontally), the content in the left grid cell (the text and the icon list) is also aligned “left” in the grid cell, so it’s in the extreme left of the page.
I should be possible for it to remain aligned “right” at the grid cell, so, as such, it would be closer to the middle line of the page, and then all content of the grid row would be in the “middle” or in the “center” of the page, horizontally.
I don’t really know how to make this point clearer, as I’m brazilian and my mother tongue is Portuguese.
Please help me fix this.
Thanks in advance.
Newton
Hi,
I’m very sorry for the confusion. Please edit the cell containing the text content, add a custom css class attribute to it (e.g “custom-cell”) then use the following css code to push the content towards the right.
@media only screen and (min-width: 1600px) { .custom-cell .flex_cell_inner > * { left: 200px; position: relative; } }Adjust the value as needed.
// http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
IsmaelSorry,
The instruction was very incomplete. I’m not a coder, so I don’t know what you mean by “Please edit the cell containing the text content, add a custom css class attribute to it”.
The cell doesn’t have (as in the article you sent me) the “Custom Class” field.
And… What I need is that the LEFT CELL ALIGNS RIGHT. Not that I “push” the content “from the left”, because there will be screen size differences, and this PIXEL SOLUTION won’t produce equal results.
Sorry for my English, I’m brazilian.
What I actually need is: left cell aligning right, as a reflex of the right cell (that aligns left).
Newton.
Hi,
Please follow the instructions in the link that we provided above.
What I actually need is: left cell aligning right, as a reflex of the right cell (that aligns left).
I think you misunderstood what I’m saying. Yes, that’s what we are trying to do. We’ll push the content of the left cell towards the right, near the image.
Best regards,
IsmaelThe instruction is not clear!
I don’t know what you mean by: “Please edit the cell containing the text content, add a custom css class attribute to it (e.g “custom-cell”)”, because I can’t find the field “custom css class”!
I’m not using ENFOLD 2017, but the older version (2016)
Ismael,
I did what you asked. I edited the PHP file.
And I edited the cell.
Now look, it not only didn’t work, as it removed the color from the cell background:
Hi,
Did you read the instruction in the following link? It will enable the custom css class field.
// http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
We have provided the info twice, third time now. Please post the login details in the private field.
Best regards,
IsmaelYes, as I told you in the message before: I did the PHP change as requested (in the article)!
And that not only didn’t help with the alignment, but also messed up the color of the cell.
:(
Please!
I need help with this issue!
I did everything as instructed, but with a bad result.
Please help me on this.
Thanks in advance.
Newton.
Hi,
The functions.php file is not writable so we can’t edit it. Please edit the file then look for this code.
//set builder mode to debug add_action('avia_builder_mode', "builder_set_debug"); function builder_set_debug() { return "debug"; }Below, add this code to enable the custom css class field.
add_theme_support('avia_template_builder_custom_css');We’ll edit the elements after that.
Best regards,
IsmaelHello,
Code inserted to the functions.php of the CHILD theme.
Would you like me to insert it also to the main (Enfold) theme?
Newton.
Hi,
We applied the “custom-cell” class attribute to the cell but the css modification is not working yet. Please add this code in the style.css file.
@media only screen and (min-width: 1366px) { #top .custom-cell .flex_cell_inner > * { position: relative !important; left: 180px !important; } }Why is the dynamic stylesheet rendered internally? Did you modify the theme files?
Best regards,
IsmaelHello,
I just added the code to the style.css.
But on the child theme.
Please specify in the next assignments whether the file you mention is of the Enfold (main) theme or the child theme.
Regards
Newton.
Sorry to ask, but… Why are we taking so long to address this issue?
This topic has already 18 posts… :(
And the website is depending on this problem to be solved.
It’s really urgent.
Newton
Hi,
Please add the css code in the style.css file.
It’s taking too long because we can’t edit your website. The “Update” button in the Appearance > Editor panel is disabled. Please post the FTP details in the private field so that we can add the code.
Best regards,
IsmaelI’ll post FTP details in private.
But please be aware that I have multiple websites in this server. The one we are talking about is LINCHEN.COM.BR
Please don’t change the others.
Newton
Hi,
Thank you for the info. We edited the css code in the style.css file. The value is now set to 250px. You can adjust it as needed. Please remove browser cache or hard refresh before checking the page.
Best regards,
IsmaelIsmael,
It worked for regular and medium size screens.
But for very large screens, the issue remains the same.
I see you are approaching the issue from the wrong perspective: I don’t want to PUSH FROM THE LEFT, but rather, to ATTACH TO THE RIGHT.
The middle point of the page is the RIGHT of the GRID CELL. If we could make the item centralized RIGHT to the CELL, then, it would work in every kind of monitor screen.
But what you are doing is creating extra space on the LEFT of the CELL, so it will work on some screens, but in the larger ones, the problem remains the same, as you can see in this printscreen:
https://www.dropbox.com/s/sou515u034bh9u4/Screen%20Shot%202017-10-05%20at%2010.56.41.png?dl=0
Why is so difficult to align RIGHT to the CELL?
Regards
Newton
Hi,.
But for very large screens, the issue remains the same.
Create more css media queries to adjust the left position on larger screens.
@media only screen and (min-width: 1600px) { #top .custom-cell .flex_cell_inner > * { position: relative !important; left: 500px !important; } }Please copy the code above directly from this forum, not from your email.
Best regards,
Ismael
- The topic ‘Grid Row, Horizontal Alignment’ is closed to new replies.