-
Posts
-
Hello Kriesi,
thank you for your support.
I have some troubles with my page Sonic Tonic (Page), which is not responsive on the landing page. I added a picture of a mobile phone on the desktop version and set the visibility on mobile to “hidden”. The phone is hidden on mobile, however, the space it occupied stays blocked and the text boxes are not expanding to full width.
What can I do so the occupied space is gone (something like position absolute or anything) and I can expand one column to full width by ignoring the other column for mobile responsiveness?
All the best,
NikoHi Niko,
Please send us a temporary admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.
Best regards,
RikardHi,
Thanks for the details, though they seem to not be working. Could you check and verify please?
Best regards,
RikardHi,
Thanks for that, login details are working now. First off please try updating the theme to the latest version (3.8.4) to see if that helps: http://kriesi.at/documentation/enfold/updating-your-theme-files/
Best regards,
RikardHey Rikard,
I updated the enfold theme but the mobile responsiveness is still missing.
I chose to not display the phone in the mobile sized screen, however, it still shows a half stuck picture of the phone on one section of the landing page, while leaving the textboxes aligned to the right side instead of stretching them to full width.Any help is appreciated, since this does not seem to be mobile responsive at all :(
Bg,
NikoHi,
I checked the settings and the Enfold > General Layout > Dimensions > Responsive Site option is disabled. Was that intentional? We enabled it back and I don’t see any issue except for the logo image, which is expected because of the following css code.
.icon_img img { max-width: 480px; }You can replace it with the following css code so that it will not affect the mobile view.
@media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ .icon_img img { max-width: 480px; } }Could you please provide a screenshot of the “phone” issue?
Best regards,
IsmaelHallo Ismael,
danke für deine Lösung der mobile responsiveness. Diese Option hatten wir ausgeschaltet, weil die Auflistung der einzelnen Icons viel zu groß ist und diese daher untereinander dargestellt werden.
Um diese Option nutzen zu können müssten wir die Icon Container mit Bild und Schrift kleiner darstellen, damit man nicht 4 Mal scrollen muss, um durch eine Section zu gelangen ;)
Anbei die Lösung welche wir uns überlegt hatten. Diese stellt die Icons im Header Image und auch in den Sections besser dar.
Diese hat leider das Problem, dass die Sections nicht auf “hidden in mobile” oder Media 720px und co. Aufrufe reagieren, da die Seite einfach nur geschrumpft ist.
Vielen Dank.
Hey!
Thank you for the screenshot. Please add this in the Quick CSS Field.
@media only screen and (max-width: 1024px) { .responsive #top .av-hide-on-mobile, .responsive #top .av-hide-on-tablet { display: none !important; } }Remove browser cache before checking the page again.
Cheers!
IsmaelHey Ismael,
thank you for your solution.
Unfortunately, it did not make the empty columns disappear :(I tried the Quick CSS field in the General Styling Section, as well as using Custom CSS Classes for the columns. It does not work.
@media only screen and (max-width: 1024px) {
.phone_pic #top .av-hide-on-mobile, .phone_pic #top .av-hide-on-tablet {
display: none !important;
}
}I assume the @media is not picking up (since the responsive site is disabled again), but it does also not work hard coded without the @media trigger. The custom css fields or not responding, the “hide on mobile” does not respond, the @ media trigger for .responsive is also not working.
I need to find a solution here guys :-/
I don’t necessarily have to switch of the responsiveness in the general styling, however, a listing of icons that takes up to 4 screen length is not acceptable for our users. Is there a way to make this responsive without having the effect of the first screenshot? We want it to be visible as the last screenshots, which display the icons more in groups as opposed to a list, but still make it look decent and not out of place with a phone picture hanging in the middle of a section (why??!) and some columns just don’t display the phone picture on the section – leaving a blank section.
Please help ;-)
Hi,
this is what I see on mobile: http://i.imgur.com/ha9FlfT.png, which looks pretty much as you want it to be, right? so it seems you could fix it already. If not then please send us screenshots showing the issues, as I can’t see anything wrong on your website.
Best regards,
AndyHey Andy,
as you can see in my screenshots above, this is our current view, which is looking great from the icons (as it is more a cluster than a list) but is still broken because of the sections which do not want to disappear.
I attached some more screenshots for you guys :)
The Issue is the phone, which functions as background picture for the lefts columns. In 1 and 2 it is gone, yet the column remain. In section3 it is shown stuck in between.
Solution a) the phone picture should be shown next to the section. b) the phone picture disappears and the sections width extends to a 100%.The “About” Section should be full width, since the left section is .hidden.
The “Background” Section should be full width. Same issue.
Here the phone is not even fully hidden. It seems to be stuck in between the sections.
Hi,
this is exactly what I see on mobile screen size: http://i.imgur.com/ZCZOtmv.png
So it seems to me that it is already working as you need it.Best regards,
AndyHey Andy,
I understand that it might seem this way, since you can’t reproduce the issue.
However, I have just now tested again with iPad mini, Iphone 7, Iphone 6 and Iphone 5 and all the screens show the same issue as I have documented with my screenshots. Caches have been cleared as well private mode engaged.
What phone (resolution) do you use that gives you such a view?
Also, even though the phone shows on your screen – and I believe that it is hard to understand my problem here (although I’m trying ;) – my main problem (getting the three sections to look the same as in same width or same phone in the middle) still remains. Therefore, I don’t understand your response “I can’t see anything wrong” and “it seems to me that it is already working as you need it”. Nothing has happened and nothing has been changed :(
Do you need more details on my problem? The screenshots documented my current situation and I’m trying to explain what is not working.
E.g. why is the phone showing on the blue Ingredients section but not on the others? The implementation is the same on all sections. Also the autosuggestion label is clearly overlapping. The div boxes should not make this possible. Why are the column not disappearing as coded?
The mobile responsiveness is clearly messed up and needs fixing. I’m going to provide all the informations you require, but the page is not looking great at all.
Hi,
if you want to increase the picture of your mobile phone on mobile devices use this code:
@media only screen and (max-width: 736px) { .phone_pic { background-size: 100% 42% !important; }}and adjust background-size values as needed.
For your “autosuggestion” icon: Use a Custom CSS Class for it, for example “test-icon”. Then use a code like this inside of Quick CSS field:
@media only screen and (max-width: 736px) { .test-icon { margin-left: 67px; }}and adjust as needed, to get some more space on mobile devices.
It’s best for us if you clearly separate your issues by opening different tickets for them. Then you would also get a much faster reply from us, cause more moderators can work on your issues at the same time.
Best regards,
AndyHi Andy,
thank you again for looking into this.
if you want to increase the picture of your mobile phone on mobile devices use this code
Why would I want to increase the size? The picture of the phone is only visible in one of the three sections, where it is implemented in columns with the avia layout builder and in that section it is shown only half way. I can’t reproduce your screenshot on any of my devices, in private or new cache browsers. The picture is missing on “About” and “Background” and is stuck in between the sections “Tonics” and “Ingredients”. Please refer to the screenshots I have posted :)
For your “autosuggestion” icon: Use a Custom CSS Class for it, for example “test-icon”. Then use a code like this inside of Quick CSS field:
I’ve tried this solution and noticed that non of the @media is working. Since we’ve disabled the mobile responsiveness, as it was showing all our icons in a list which were just too long, the @media section is somehow not picking up. I’ve tried different resolutions. The margin worked without the @media perfectly though, that resulted in a bad view on the normal desktop page however.
EDIT: The margin did not work on the mobile device without the @media as well. I could not change the margin no matter what. I’ve tried different resolutions, leaving out the @media and trying really high margins. In the mobile version the “autosuggestion” label has never moved. It did on the desktop version though.
BG
Hi,
parallax scrolling on mobile is deactivated by default, refer to: https://kriesi.at/support/topic/no-parallax-effect-in-mobile-devices/
So basically you’re saying that this code is working (on desktop):
.test-icon { margin-left: 67px; }while this code (for mobile):
@media only screen and (max-width: 736px) { .test-icon { margin-left: 67px; }}is not working for you?
If the first one is working for you, then with media queries it should work fine, too. For more information about media queries refer to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I feel it would be best for you to work together with a freelance developer on those issues, especially if you want to customize things and if you’re working on time sensitive projects: http://kriesi.at/contact/customization
Best regards,
AndyHello Andy,
I’m sorry for the belated reply.
parallax scrolling on mobile is deactivated by default
That is some useful information! So the bug is caused by the parallax effect on desktop, which can’t be reproduced on mobile.
How can I allow parallax scrolling on desktop but disabled it on mobile? I know it is disabled by default, but right now it is still causing problems for my mobile.If the first one is working for you, then with media queries it should work fine, too.
Unfortunately, it does not. I provided the LogIns for you Mods. Feel free to quickly test yourself. It does not work.
I feel it would be best for you to work together with a freelance developer on those issues, especially if you want to customize things
I don’t want any customisation necessarily. I just want the mobile page to either not display as a very long list because of only one icon is being shown at a time, or hide columns on mobile which are unnecessary because the content (parallel effect picture) isn’t being shown anyway.
I should be able to set these within Enfold, but it does not work.BG,
SonicTonicHi,
so is this code:
.test-icon { margin-left: 67px; }working for you or not? Please make things clear for us.
We strongly recommend to enable “Responsive Site”, otherwise you’ll get into trouble when accessing your website on mobile devices. Only disable it if you don’t plan to use your website on mobile devices. So does this issue about parallax effect disappear when you enable responsive site function?
Best regards,
Andy
- You must be logged in to reply to this topic.