-
Posts
-
Hi there, on my new website I mainly use two columns for the content in desktop mode. When displayed on a mobile device they naturally collapse to one column. The question is, how do I change the spacing between the two neighbouring blocks in mobile mode? (See screenshots below)
Hey ThomasN001,
I’m not sure I understand which space you are looking to alter. Could you try to explain what you are looking to achieve a bit further please? Also please link to where we can see the actual elements on your site.
Best regards,
RikardHi Rikard,
thanks for your answer.
Look at the screenshot with the two columns (desktop version). There are two content blocks next to each other. The one on the left is titled “Zeitgeist Movement Campaign Video”, the one on the right has the title “Hellegance 2009 Intro”.
Now take a look at the screenshot with one column (mobile version). These two content blocks are now stacked on top of each other, as is expected. However, now I got a new space (green marking in the screenshot) between those two content blocks, that doesn’t exist in the two columns (desktop) version. That’s the one I want to customize.
I hope, I’m making sense now. :)
Cheers,
ThomasEDIT: And while we’re at it, the same goes for the fodder… Two columns in desktop mode, one in mobile mode. How do I change the space marked green in the 2nd screenshot (Spacing_Fodder_Mobile_1column.jpg)?
Hi,
Thanks for the clarification. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { #footer div.first { margin-bottom: 0; } }Best regards,
RikardUnfortunately, this doesn’t do anything, no matter which value I put in.
Any solution for the same issue regarding the main content/text?
Hi,
This seems to be coming from your child theme:
#top .social_bookmarks { margin-top: 40px!important; font-size: 28px; }Try removing it, or put it in a media query if you only want that to apply on screens larger than mobile.
Best regards,
RikardHi Ricard, the code you gave me has still no effect. I put the “margin-top: 40px” in media query now, so that reduced the spacing somewhat. Still, I’d like to decrease it even more.
Hi,
Did you try removing the code I referred to above? That is what is adding space above the social icons:
#top .social_bookmarks { margin-top: 40px!important; font-size: 28px; }If you add a class to the container which holds the social icons, then it will be easier to target it with CSS.
Best regards,
RikardI put the problematic code in a media query, but to be 100% sure I removed it now completely and it still doesn’t work. See for yourself below…
How/Where do I add a class to the container of the social icons?
Hi,
The code is gone now, but it’s a bit difficult to understand exactly what you are looking to achieve. What exactly is not working? If you want to add a class to the column, then open the element options and add it under Advanced->Developer Settings.
Best regards,
RikardI’d like to reduce the spacing with the green marking (see screenshot).
I achieved that to a certain degree, by putting the #top .social_bookmarks {margin-top: 40px} code in a media query, so it’s only applied to the desktop version. I’d like to reduce that spacing even more, though.
EDIT: Solved it. Just used the same code mentioned above, but with a negative value and in a media query, so it’s only applied to the mobile version.
That being solved, there’s still the same issue for the main content. Here’s my original describtion again with the screenshots below:
Look at the screenshot with the two columns (desktop version). There are two content blocks next to each other. The one on the left is titled “Zeitgeist Movement Campaign Video”, the one on the right has the title “Hellegance 2009 Intro”.
Now take a look at the screenshot with one column (mobile version). These two content blocks are now stacked on top of each other, as is expected. However, now I got a new space (green marking in the screenshot) between those two content blocks, that doesn’t exist in the two columns (desktop) version. That’s the one I want to customize.
Hi,
Please try this CSS as well:
@media only screen and (max-width: 767px) { .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin { margin-bottom: 0; } }Best regards,
RikardWell, the right area (green marking) is affected as intended, but unfortunately so are the others (red markings) which shouldn’t be the case. (screenshot below)
Can this code be further specified?
Sorry for the late reply…
So, I should give the “module” marked red (see screenshot) an ID, right? The problem is, that module doesn’t have that option. Only the module above (marked green) does have it.Hi,
You can add a class or an ID, it doesn’t really matter which one it is. The columns has the class option under Advanced->Developer Settings.
Best regards,
RikardMaybe I’m too stupid, but the columns don’t have the option “Developer Settings”. See the screenshot, that’s all there is.
Hi,
Did you turn on the Hide Advanced Layout Builder Developer Options option under Enfold->Layout Builder? If that is not the case, then please post admin WordPress login details in private.
Best regards,
RikardAhh, here we go… :) Thanks Rikard! Ok, I gave the first column the ID “clmspc”. Now, how do I target that?
Hi,
Great, I’m glad that you found it. Please try this CSS:
@media only screen and (max-width: 767px) { #clmspc { margin-bottom: 0; } }You can give it negative margin as well, if that should be necessary. If so, then replace 0 with -20px for example.
Best regards,
RikardUnfortunately, that doesn’t do anything.
EDIT: Okay, made it work. I have to give the ID to the text block itself and not to the column block. (Weird that it only works that way, though.)
The problem is solved then. Thanks a lot, Rikard!!
- You must be logged in to reply to this topic.