-
AuthorPosts
-
September 28, 2020 at 6:53 pm #1249119
Good Evening Folks,
new question: how can I change the distance between different elements
on my site? Please take a look on my screenshot and on my site and
you’ll understand immediately :-)Kind regards
CarstenSeptember 29, 2020 at 6:25 am #1249251Hey Carsten,
I’m not seeing that much a distance when I view the site. Were you able to get this fixed?
Best regards,
Jordan ShannonSeptember 30, 2020 at 1:36 pm #1249637Hi Jordan,
could you please post a screenshot, too. Because without I can’t see what you see on your side.
And – no of course, I couldn’t fix the problem(s)…how could I? Because I lack the knowledge,
I ask you. I’m looking forward to your new reply!Kind regards
CarstenOctober 2, 2020 at 11:52 am #1250023Hi Carsten,
Please try adding classes or ID’s to the elements in question first, otherwise it will be difficult to target only those elements with CSS.
Best regards,
RikardOctober 2, 2020 at 4:33 pm #1250127Hi Rikard,
thx for your new reply! :)
I understand what you has written, but sorry, with this topic areas I don’t feel really
familiar, because I know to less about it until today. ;-/ Or better say – until today
I recognized it, but never really worked with it. ;-/ Yes, I did, but at that time Mike
helped me and told me what I had to fill in the fields. So, you see…I’m not familiar. ;-)I looked also into the enfold-documentation for it, but I didn’t find nothing. Am I blind
or is there really nothing of that in? Please, can you give me a small introduction to
that topic or is there maybe a written documentation? That would be very nice! :)
As I unfortunately always must repeat – I’m still a developer-html-newbie :-) I hope you’ll
bear with me! :-)I’m looking forward to your new answer!
Best regards
CarstenOctober 4, 2020 at 5:46 am #1250363Hi Carsten,
Thanks for the update. The field for adding ID or classes to an element can be found if you open the element options, then go to the Advanced->Developer Settings tab. We can do it for you if you give us access to your site in private.
Best regards,
RikardOctober 4, 2020 at 6:52 pm #1250455Hi again Rikard,
thx for your answer. Ok, I need to be more specific! ;-) Of course I know where
the “developer settings“ are. But as I has written, until today I have not yet
dealt with it so intensively. ;-) So, is there really nothing written about it from you?
And if not, do you maybe have a link for me?Independent of that you can tell me what I’ve got to do, or better, what I’ve got to
fill into the ID/Classes-fields to fix my distance-problems.Wish you a good start into the new week and looking forward to hear from you.
Best regards
CarstenOctober 6, 2020 at 5:45 am #1250691Hi Carsten,
Thanks for the update. You can give the columns a class like “db-col” for example, and the header could have an ID like “kunst-header”. It doesn’t really matter though, we only need something to target for the custom CSS.
Best regards,
RikardOctober 26, 2020 at 9:03 pm #1255834Hi again Rikard,
sorry, for the long delay! In times like these we all have so many differnet things
to do, don’t we? ;-/Thx for your last infos – I have implemented everything so far! :-)
So, now we can beginning to optimize the distances between elements. :-)
Please take a new look at the first screenshot.I’m looking forward to your new answer!
Best regards
CarstenOctober 28, 2020 at 7:00 am #1256281Hi Carsten,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { #header-1 { margin-top: -10px; } #warum-designbasis { margin-bottom: 30px; } }
Best regards,
RikardOctober 28, 2020 at 3:11 pm #1256401Hi again Rikard,
thx for your new reply! And the CSS-Snippets are working very well…nice! :-)
But there is still one small blemish – look again at the screenshot 1. The pro-
blem with the header-1 is not solved. How can we fix that line problem?
PS: In the meantime I thought about it again and now i have created an ad-
ditional text block, which is already three lines long and is only displayed
on mobile devices. This solution seems to me to be the most sensible one
at the moment. Are you of the same opinion or do you have an alternative
solution?And second: it seems that I need another snippet(s) for the columns, because some
distances only can changed if you change them and not the single element. You can
see examples on the new screenshot and on the site of course. I tried it like this:
———————————————————
@media only screen and (max-width: 767px) {
#kontakt-col2 {
margin-top: -20px;
}
———————————————————
But unfortunately it doesn’t work. So, where is the error in thinking?Best regards
Carsten- This reply was modified 4 years, 1 month ago by designbasis.
November 1, 2020 at 4:28 am #1257380Hi Carsten,
Header: it looks good on my end now, and the CSS is applying. Do you still see the results like in your screenshot?
Kontakt page: you have an empty 1/4 element with padding applied to it on the page, what happens if you select to not show that on mobile screens in the element options? The same thing seems to be happening on the avg page.
Best regards,
RikardNovember 3, 2020 at 1:00 am #1257797Good evening Rikard,
Header:
No, it looks here also ok now, but only because of my additional text block,
as I wrote. If you have no other alternative solution I can live with it until
further notice. ;-)Kontakt-Page:
Thx for your tip with the empty ¼ element. I must look even more precisly
on which element is visible or invisble on mobile-view. :-) It helps a little
bit with the distance but it is still not perfect, sorry. ;-)Look again at the new screenshot. I wanna still less distance between the
single columns. So, how can I get this? And I want it for all the pages of
my complete site.Thx in advance for your further help!
Best regards
CarstenNovember 4, 2020 at 4:57 am #1258167Hi Carsten,
Thanks for the update. The header on the contact page is located where it is because of this CSS:
@media only screen and (max-width: 767px) { #kontakt { margin-top: -50px; } }
We can adjust that for you, but there’s no CSS which would apply the same space for all your headers in relation to the below element, if you apply custom CSS to them. If you adjust the CSS above to -35px instead, then it will look better. But then I’m guessing that you want to adjust the amount of space between the header section, and the h1 header?
Best regards,
RikardNovember 4, 2020 at 8:18 pm #1258427Good evening again Rikard,
thx for your new reply!
I understand and you don’t have to adjust. I can do that by my own. :-)
Yes, with -35px it looks a little bit better, but then the header is again
to far away from the top…as you noticed correctly! ;-)Why isn’t it possible to work here with CSS-Classes for the columns,
as you explained in “reply #1250691”? I always think that that is the
best way to fix it. But I’m not the professional here…that’s you, of course! ;-)
So, what would you suggest next? I really wanna adjust the distances
between “all“ colums on all pages. And yes I know that I need more
then one new css-snippet for that. :-)And as you noticed correctly it would also be nice to adjust the distance
between the headlines of the single pages and the topbar a little bit. :-)
How can I do that, too?Thx in advance for your new sugesstions!
Best regards
CarstenNovember 5, 2020 at 11:51 am #1258568Hi Carsten,
The main content container has a top padding of 50 pixels by default, maybe you want to remove that if you want greater control of your layout? If so then please try this CSS as well:
@media only screen and (max-width: 767px) { main.content { padding-top: 0; } }
Then you won’t need the custom CSS you have for the kontakt header for example.
Best regards,
RikardNovember 5, 2020 at 5:24 pm #1258676Hi Rikard,
thx for the new snippet…it works very well…as in my imagination. :-)
But I still use the other css-snippets, too, because they make the
positioning of the single elements better! :-) I did adjust them. Take a
new look and you’ll see.But my other wish is still unfulfilled. ;-) Look at the new screenshsot.
I still need an command for the columns-distances! :-) With which
snippet can I adjust them? I think still with the css-classes. ;-)Thx in advance for your patience!
Best regards
CarstenNovember 7, 2020 at 5:57 am #1258996Hi Carsten,
Thanks for the new screenshot. Please try this in Quick CSS as well:
@media only screen and (max-width: 767px) { h1 { margin-bottom: 0; } .page-id-179 .main_color .flex_column { margin-bottom: 10px; } }
Best regards,
RikardNovember 8, 2020 at 8:01 pm #1259130Good evening Rikard,
thanks for your new snippets!
After I adjusted a little bit the h1-snippet it works very well. :-)
————————————-
#kontakt h1 {
margin-bottom: -10px;
}
————————————-
If I don’t adjust the snippet the h1-header on the startpage is to tight! ;-/
But I’m happy that the adjustment works as I want. :-)But sorry, the second snippet doesn’t work. The columns on the “kontakt-
page” doesn’t adjust. Could you please so kind and have a further look
on it…thanks in advance!Best regards
CarstenNovember 10, 2020 at 4:37 am #1259455Hi Carsten,
Thanks for the update. Please try this CSS instead:
@media only screen and (max-width: 767px) { .page-id-179 .main_color .flex_column { margin-bottom: 10px !important; } }
Best regards,
RikardNovember 16, 2020 at 5:31 pm #1260753Hi Rikard,
sorry for the late reply and thanks for your last snippet!
Now it works as it should…great! Only one small word
was missing….!importtant; ;-)For the moment everything it’s ok, but please let the
thread a little while open, because I’m still not
completley through with that theme. ;-) I’ll be back
as soon as possible!…thanks!Best regards
CarstenNovember 17, 2020 at 10:39 am #1260928 -
AuthorPosts
- You must be logged in to reply to this topic.