Image/text format on mobile - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
September 1, 2021 at 3:02 pm #1319366

natashawalker1
Participant

Hello,

Please could you help correcting the layout of image/text of one of our pages so it’s mobile friendly. To help explain myself, on a computer the layout is:

IMAGE – TEXT
TEXT – IMAGE
IMAGE – TEXT

Which is correct. However on a mobile it goes like this:

IMAGE
TEXT
TEXT
IMAGE
IMAGE
TEXT

It seems to be left justifying, I think it should be left, right, left justified? I just have no idea how to change it.

Please could you help. I look forward to hearing from you :)

Kind regards,

September 3, 2021 at 5:57 am #1319586

Ismael
Moderator

Hey natashawalker1,

Thank you for the inquiry.

You can adjust the sorting of the columns on mobile using css. A few examples can be found in the following thread.

// https://kriesi.at/support/topic/mobile-page-setup/#post-1012954
// https://kriesi.at/support/topic/mobile-device-display-order/#post-1307911
// https://kriesi.at/support/topic/possible-to-change-column-order-on-mobile/#post-1025940

Best regards,
Ismael

September 8, 2021 at 1:37 pm #1320103

natashawalker1
Participant

Hello Ismael,

We have followed the links that you have provided us and none of the css is working. Please are you about to login to our website using the details provided and put the correct code in yourself?

Additionally, we are attempting to update our Enfold theme from the back end of WP, but to do this we need to input an Envato private token key, we are unable to locate this in our licencing documentation and when we create one here (https://build.envato.com/create-token), it doesn’t work.

We would like to resolve these issues as soon as possible. I look forward to hearing from you.

Kind regards,
Natasha.

September 10, 2021 at 6:12 am #1320328

Ismael
Moderator

Hi,

Did you apply a custom css class name (av-custom-column-order) to the color section containing the columns as described in the following thread?

// https://kriesi.at/support/topic/mobile-device-display-order/#post-1307911

The custom css class name field is located in the element’s Advanced > Developer Settings panel.

The automatic updater will no longer work in the current version of the theme (4.5.7), so you will have to update the theme manually via FTP.

// https://kriesi.at/documentation/enfold/theme-update/#update-via-ftp

The current token that you have in the theme options is also invalid. Please make sure that it has the correct permissions as described in the following documentation.

// https://kriesi.at/documentation/enfold/theme-registration/#how-to-generate-a-envato-personal-token

Best regards,
Ismael

September 10, 2021 at 12:29 pm #1320392

natashawalker1
Participant

At the moment we are so UNCLEAR about what you are saying. Please could you reply to my specific thread and not keep directing me to other conversation threads. Our client loves the layout of the page on their website with the opposite text and images, however, as described in my first message, on a mobile the page looks bad as the text and images don’t align.

Please clarify EXACTLY what CSS we need to use and WHERE it needs to go. For example, is it in Appearance -> Customise -> Additional CSS or somewhere else?
You mentioned colour sections, do we need to use this for the custom CSS to work?

In relation to updating the theme:
We have updated the Enfold theme manually using FTP – but we received the below error.
To temporarily resolve this issue, we changed the file name notices.php to notices.old. Please advise how we can FIX this.

“An error of type E_PARSE was caused in line 277 of the file /home/nicholsonbrown/public_html/wp-content/themes/enfold/config-layerslider/LayerSlider/assets/wp/notices.php. Error message: syntax error, unexpected end of file”

September 11, 2021 at 2:15 am #1320475
Ismael
Moderator
Hi,

The links above should direct you to the official theme documentation, which contains most of the answers that you are looking for. If you need the exact css, please try the following css code. We already move the columns inside a color section and applied a custom css class name to it.
```
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .av-custom-column-order .entry-content-wrapper {
    display: flex;
    direction: ltr;
    flex-direction: column;
  }

  .av-custom-column-order .av_one_half:nth-child(1) {
    order: 2;
  }

  .av-custom-column-order .av_one_half:nth-child(2) {
    order: 1;
  }

  .av-custom-column-order .av_one_half:nth-child(3) {
    order: 4;
  }

  .av-custom-column-order .av_one_half:nth-child(4) {
    order: 4;
  }

  .av-custom-column-order .av_one_half:nth-child(5) {
    order: 6;
  }

  .av-custom-column-order .av_one_half:nth-child(6) {
    order: 5;
  }
}
```
The css should re-order the columns on smaller screens as shown in the screenshot below.

Result: https://imgur.com/Flq67lt

Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Best regards,
Ismael
September 21, 2021 at 12:42 pm #1321740

natashawalker1
Participant

Hello Ismael,

Thank you for the CSS, it has worked as intended.

In relation to updating the theme – like mentioned before – what do you recommend we do?

We have updated the Enfold theme manually using FTP – but we received the below error.
“An error of type E_PARSE was caused in line 277 of the file /home/nicholsonbrown/public_html/wp-content/themes/enfold/config-layerslider/LayerSlider/assets/wp/notices.php. Error message: syntax error, unexpected end of file”
To temporarily resolve this issue, we changed the file name notices.php to notices.old.

I look forward to hearing from you.

Kind regards,
Natasha.

September 24, 2021 at 5:53 am #1322104

Ismael
Moderator

Hi,

Good to know that the css worked. Regarding the layer slider, we have not encountered that same issue before. Looks like the file is corrupted or incomplete. Are you sure that the theme files were completely updated? Please try to replace the file again. The latest version of the theme is 4.8.6.3.

Best regards,
Ismael
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.