-
Posts
-
Hi!
My site uses negative margins for an overlaying effect, but is it possible to remove the negative margins in mobile view? I’ve tried assigning the element a css class and using the quick css panel to give it 0 margin, but that doesn’t seem to be doing the trick.
Thanks!
Hi!
Can you please post the link to your page and point out the elements you would like to edit?
Regards,
YigitHmm, your link function doesn’t seem to be operating for some reason.
website: http://www.essentialifecoaching.com/
photo of mobile view: http://imgur.com/BM2egIaHi!
Try the solution provided on your previous thread: https://kriesi.at/support/topic/mobile-layout-issues/#post-529028
You added a lot of the whitespace element on the grid row section, remove it on smaller screens by adding the “only_desktop” class attribute.
Best regards,
IsmaelYes, thanks, that works for removing the blank space above the blog section, but I still need to get the blue/green quote section (the one with the negative margins) to display correctly. I’ve used the “only-desktop” attribute to keep it from showing on mobile right now only because it looks very bad and the site is live. I want it to be visible, but I want it to display exactly as all of the other elements in the mobile view. Right now it looks like this: http://imgur.com/U3dhUTX, but I want it to fill 100% of the width, be tall enough to read the quote inside it, and to be flush with the “welcome” section above it and the “blog” section below it.
Thanks!
Yes, I just basically want it to look like all the other sections of the website:
Thanks!
Hi!
I checked you website on my mobile device and it looks exactly as in the mockup you have send. Could you fix it already?
Cheers!
AndySorry for the long delay in response, I’ve been down with a cold.
No, I didn’t fix it. I’m going to try to re-explain the situation because I’m obviously not explaining it well:
To get the desktop layout we want, I needed to use negative top and bottom margins on the blue “quote” section ( the one with the image of the pier behind the white text):
In mobile view, these negative margins seem to be causing the quote section to fall behind the other elements and be overlapped:
I’ve used some custom css to make this quote section not show in mobile view because the site is currently live and being promoted, so obviously we don’t want clients to see it in that state, so it currently looks like this:
What we would like for it to do, is to display the quote section exactly like the other sections, and look like this:
Thanks for your help!
Hi!
thanks for the explanation. Can you provide us a test link where we can see the issue please? because we need to be able to inspect the elements in question.
Cheers!
AndyThe test site content has been taken down, since this change was requested after rollout, but the login to the live site is:
Hi!
live site does not help us much, if we can’t see any issues there, because we need to inspect the elements where it’s not working for you, if you want us to be able to provide you some CSS code. Let us know when you are ready and able to provide us a link showing the issue.
Regards,
AndyHey!
remove this code which you are using right now:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .av-flex-cells .no_margin { height: auto !important; }}and then use this code:
@media only screen and (max-width: 767px) { .flex_cell.no_margin.av_two_fifth.avia-builder-el-14.el_after_av_cell_one_fifth.el_before_av_cell_one_fifth { width: 116% !important; margin-left: -30px !important; height: 385px !important; }}Best regards,
AndyMy quick css does not contain the above code:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .av-flex-cells .no_margin { height: auto !important; }}The only code I have that targets responsive is this:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .container { width: 100%; max-width: 100%; } }Is the code you are referencing in a php file, perhaps?
I tried removing the existing above code and replacing with your supplied code, but it does not solve the problem.
Thanks
- You must be logged in to reply to this topic.