Forum Replies Created
-
AuthorPosts
-
My 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
Here you go:
The test site content has been taken down, since this change was requested after rollout, but the login to the live site is:
Sorry 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!
Yes, I just basically want it to look like all the other sections of the website:
Thanks!
Yes, 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!
Thanks, that worked!
I’m failing at posting links, let’s try again: http://imgur.com/W0w8q4J
Hmm, your link function doesn’t seem to be operating for some reason.
website: http://www.essentialifecoaching.com/
photo of mobile view: http://imgur.com/BM2egIaThanks! That got rid of the white space at the top of the page, and while it reduced the white space below the affected element, it’s still there: .
I’ve double checked that there’s no element there causing this issue.
Sorry, one last thing that didn’t get resolved from above. I’ve still got white sections above and below the first section of the website that I can’t for the life of me get rid of. I figured out that it was the background image of this section that was visible in these gaps, so I used some code I found elsewhere on these forums to remove the background image in mobile view, in the hopes that that would solve it, but now I’m just seeing white space. How can I tighten these vertical gaps up?
Thanks!
Sorry for the long response time! Worked like a charm! Thanks!
That definitely solves the full-width issue, thanks! But one thing I am noticing now is that the blog section’s image is beginning too low, leaving a gap between it and border of the section it should be in. It’s just a png set to appear in the upper left of the layout element (it’s supposed to look like it’s going out of the element it’s housed in).
And the second issue wasn’t a button, it was the green icon overlaying the screen. It’s set through the Enfold options to show up as a loading screen image above the whirling circle below it, but it appears off center like that in mobile, but dead-center in desktop.
Thanks!
That did it! Thanks so much!
Whoops! Sorry, here it is: essentialifecoaching.com
October 20, 2015 at 5:25 pm in reply to: Can I make social media icons on blog post page and footer larger #521870Perfect! Issue resolved, thanks!
Yes! I managed to finagle a solution by putting the overlaying div in it’s own layout element. Problem solved, thanks!
What it looks like with the custom css mentioned above is this:
hereWhich is exactly what I want it to look like, but it leaves a big blue swatch at the bottom of the page, above the footer. You can see it on the website right now at here
Following the solution provided above, the elements overlap, and the blue space at the bottom of the page no longer appears, but the image of the dock moves over to the left for some reason.
Thanks for your quick response! That is a great and simple fix for the vertical overlap, but now it appears that the first layout element in the overlapping row is being ignored (it just contains an invisible white space content element) and the visible overlapping element is now too far to the left. Do you know what might be causing this?
Thanks!
October 16, 2015 at 5:27 pm in reply to: Can I make social media icons on blog post page and footer larger #520177Thanks so much for the quick reply! This fixes the size of the footer icons, but is it possible to change the size of the icons that appear below blog post entries?
Thanks!
-
AuthorPosts