-
AuthorPosts
-
March 8, 2018 at 8:48 pm #924063
Hi,
Why did you close my thread, Basilis?
https://kriesi.at/support/topic/problems-with-columns-on-ipad-portrait/#post-924044It wasn’t solved, I still have these problems, even if I’ve entered the code in the earlier thread that Ismael mentioned that I should check out.
And using the visibility option doesn’t work.Posting again here:
”There is two problems showing when entering the first page on my site (https://www.sudersand.se).
1. I´ve added the code in quick css:
@media only screen and (max-width: 990px) {
.only_desktop { display: none !important; }}
and added only_desktop in i 1/4 column. The column seems to disappear but there is still a small “gap” showing. (see attached image)2. On the swedish site this is ok, but when entering the english and the german sites the images “shrinks” (only on portrait.) I´ve tried to look for the problem but I have no idea why they are behaving like this. (see attached image.) Not all images – only two of them.”
Images is still in thread 924044.
Regards Johan
March 13, 2018 at 9:04 pm #926235Hey Johan,
You do have multiple tickets ( with the same request as you said ) that is why. Sorry if that was wrong.
1. The gap is there because the other columns have paddings so it is there because of that.2. What software you are using for translations? That is not from us as it seems, because the theme works the same all the ways so
something from the language plugin is making it.Best regards,
BasilisMarch 13, 2018 at 10:37 pm #926307Hi,
Thanks for your answer!1. So do you have any ideas to fix the problem?
The padding is there so the columns will have a nice layout on desktop, but it doesn´t work on tablet portrait. As said before, the visibility option for mobiles doesn´t work when I set the “empty” column on hidden.2. I´m using WPML.
Regards Johan
March 15, 2018 at 8:10 pm #927639Hi,
1. I can see that if we remove it, it does brake on most of the columns also.
Maybe could work if we add space on the right side also?2. Can you please email them? We do have a lot of corporation with them – it will be helpful to get things shorted out.
Best regards,
BasilisMarch 16, 2018 at 10:24 am #928007Hello,
1. And don´t know is I understand what you mean with adding space on the right side….?
Is there a way to have 2 pieces of 1/4 columns in the center of the page (on desktop) without using a empty 1/4 first?
I think that would be the easiest solution. =)
Or the best thing is of course if the visibility option worked.2. Ok, I can email them and see what they say about it.
Regards Johan
March 20, 2018 at 7:06 am #929541Hi,
On the swedish site this is ok, but when entering the english and the german sites the images “shrinks”
Did you add the css code in the english and german languages’ Theme options > Quick CSS field?
Best regards,
IsmaelMarch 26, 2018 at 8:57 am #932868Hi,
yes, the codes are exactly the same on each language-page.
Regards Johan
March 27, 2018 at 4:20 am #933320Hi,
Please disable the cache and minify plugins temporarily. Save the theme options again then do a hard refresh.
Best regards,
IsmaelMarch 27, 2018 at 8:44 pm #933868Done that, but no effect. Even flushed caches on cloudflare.
Any ideas on problem nr. 1, Ismael? =)
Best regards Johan
March 30, 2018 at 9:56 am #935198Hi,
I’m sorry for the late response. I can’t find the attached images. Which of the images are shrinking? Please provide a screenshot.
Best regards,
IsmaelApril 1, 2018 at 8:22 am #935726No problems Ismael, I´m only grateful for your help.
Added screenshots in private (and there is one more furter above that I added in the beginning of this thread). There are two images on english site and a few more on the german. =)Any ideas on how to fix the other problem, regarding the small spacing on the left of the second last image (named: Tältcamping) on the swedish site? I want a empty column to disappear on mobile/ tablet portrait but it still stays a small gap.
I mentioned it furter above as:
“1. I´ve added the code in quick css:
@media only screen and (max-width: 990px) {
.only_desktop { display: none !important; }}
and added only_desktop in i 1/4 column. The column seems to disappear but there is still a small “gap” showing. (see attached image)” .April 3, 2018 at 4:56 am #936292Hi,
Thank you for the info. Please use the following css code to fix the column issues.
@media only screen and (max-width: 989px) and (min-width: 768px) { .responsive .av_one_fourth.first.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth + .av_one_fourth.flex_column_div, .responsive .avia-content-slider-inner .av_one_fourth.flex_column_div, .responsive .av_one_fourth { clear: none; margin-left: 2%; width: 48%; } }
Please don’t forget to add the css code to the other languages. Purge the cache afterwards.
Best regards,
IsmaelApril 3, 2018 at 1:38 pm #936544Thanks Ismael!
It worked like a charm!
To only thing left is that the element with “Tent camping” (on all three languages) has a padding on the top that I can´t find out why it is there.
There is no code in style.css either, I think, that refers to any avia-builder-el.Please see attached images.
Regards Johan
April 7, 2018 at 5:54 am #938485Hi,
I’m sorry for the late response. Please include the following css declaration inside the css media query above.
.responsive .av_one_half.first + .av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first+.av_one_fourth+.av_one_half.flex_column_div { margin-top: 0; }
Best regards,
IsmaelApril 9, 2018 at 11:07 am #939059Do you mean like this:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .av_one_fourth.first.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth + .av_one_fourth.flex_column_div, .responsive .avia-content-slider-inner .av_one_fourth.flex_column_div, .responsive .av_one_fourth {
clear: none;
margin-left: 2%;
width: 48%;
}
.responsive .av_one_half.first + .av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first+.av_one_fourth+.av_one_half.flex_column_div {
margin-top: 0;
}
}If it is this you mean, I´ve tried it and it doesn´t work. =)
Regards Johan
April 10, 2018 at 7:22 am #939627Hi,
Yes, that’s what I meant. That particular modification works on our end. Don’t forget to remove the devices’ browser cache. Please provide the WP login credentials in the private field so that we can test the modifications.
Best regards,
IsmaelApril 10, 2018 at 8:12 am #939688Hmm, tried to look on several ipads but no luck.
Login are provided in private.
Thanks!
Regards Johan
April 10, 2018 at 10:49 am #939760Hi Johan,
We do not see anything in private, can you send them again please?
Best regards,
VictoriaApril 10, 2018 at 11:03 am #939772Sorry, here they are!
Regards Johan
April 13, 2018 at 12:00 pm #941432Hi Johan Lindval,
In English, everything looks aligned and in Swedish not really, the last one is jumping up. Here is the code to fix it
@media only screen and (max-width: 989px) and (min-width: 768px) { .responsive #top .flex_column.av_one_fourth.flex_column_div.avia-builder-el-63 { margin-top: 50px; } }
Best regards,
VictoriaApril 17, 2018 at 6:02 am #942936Thanks Victoria, it worked!
Had the problem on the german site as well but I found the element number on that, so its working now.
Thanks!
Regards Johan
April 18, 2018 at 4:26 am #943372Hi Johan,
Great, glad you got it working and sorry for the problems. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardApril 18, 2018 at 8:14 am #943483We can close it!
Thanks!
Regards Johan
April 20, 2018 at 3:03 am #944376 -
AuthorPosts
- The topic ‘Not showing on ipad’ is closed to new replies.