Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #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
    Carsten

    #1249251

    Hey Carsten,

    I’m not seeing that much a distance when I view the site. Were you able to get this fixed?

    Best regards,
    Jordan Shannon

    #1249637

    Hi 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
    Carsten

    #1250023

    Hi 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,
    Rikard

    #1250127

    Hi 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
    Carsten

    #1250363

    Hi 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,
    Rikard

    #1250455

    Hi 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
    Carsten

    #1250691

    Hi 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,
    Rikard

    #1255834

    Hi 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
    Carsten

    #1256281

    Hi 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,
    Rikard

    #1256401

    Hi 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.
    #1257380

    Hi 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,
    Rikard

    #1257797

    Good 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
    Carsten

    #1258167

    Hi 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,
    Rikard

    #1258427

    Good 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
    Carsten

    #1258568

    Hi 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,
    Rikard

    #1258676

    Hi 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
    Carsten

    #1258996

    Hi 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,
    Rikard

    #1259130

    Good 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
    Carsten

    #1259455

    Hi 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,
    Rikard

    #1260753

    Hi 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
    Carsten

    #1260928

    Hi Carsten,

    Thanks for the update, we’ll keep this thread open for you.

    Best regards,
    Rikard

Viewing 22 posts - 1 through 22 (of 22 total)
  • You must be logged in to reply to this topic.