Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • February 15, 2018 at 8:18 pm #912899
    BritaKossmann

    Hi
    how can i change the vertical alignment of the text that is beside the dropcap?
    <span class="av_dropcap2 " style="background-color:default">P</span><strong>hobien, Panikstörung, Generalisierte Angststörung</strong>

    The text beside the dropcad should always be aligned with the bottom of the Dropcap – otherwise it looks really terrible on small screens.
    Here is a screenshot that shows what we need:
    http://bk-psychotherapie.de/temp/dropcap.jpg

    Here the url where it is live:

    Behandlungsspektrum

    I tried a bit with capsuling the whole element in a div and giving the strong a padding but this did only work on big screens but not on small screens:

    .drops {	}
.drops strong {
	font-size: 12px !important;
	padding-top: 20px;
	display: block;
	vertical-align: bottom !important;
}

    kind regards brita

    February 16, 2018 at 10:16 pm #913405
    Basilis

    Hey BritaKossmann,

    I do not see the same from my side
    https://screenshots.firefox.com/KXGXqEtvMggTyEmU/bk-psychotherapie.de

    Take a look here

    Best regards,
    Basilis

    February 16, 2018 at 11:01 pm #913429
    BritaKossmann

    Correct – cause what you see is the status quo.
    And this is why i asked you for help.
    BECAUSE I DONT like the status quo.
    I like to have it LIKE THIS:
    http://bk-psychotherapie.de/temp/dropcap.jpg

    I can explain it a third time if that helps:
    I want that the text, which is BESIDE the Dropcap, is vertical aligned with the bottom of the dropcap.
    Like here:
    http://bk-psychotherapie.de/temp/dropcap.jpg

    Could i make clear what we need?
    B.

    February 17, 2018 at 9:55 am #913594
    Victoria

    Hi BritaKossmann,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.av_dropcap2 {
  margin-top: -20px;
}

    But in some cases, when the image is big and the word is long, the text drops below anyway on 768px screen.
    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 19, 2018 at 12:25 pm #914213
    BritaKossmann

    R E A L L Y?

    Do you really think that you suggestion is the same than what we need?
    You:
    http://bk-psychotherapie.de/temp/dropcap3.jpg
    Need:
    http://bk-psychotherapie.de/temp/dropcap.jpg

    February 19, 2018 at 3:26 pm #914298
    Nikko

    Hi,

    Can you try this css code:

    #top span.av_dropcap2 {
    margin-top: -15px;
}

    Hope this helps.

    Best regards,
    Nikko

    February 22, 2018 at 10:20 pm #916369
    BritaKossmann

    Nope
    Again: Please DO NOT move the Dropcap UP….it creates more issues.
    I need to move the TEXT BESIDE the dropcap DOWN.

    I am pretty much sure that this is not as difficult as rocket science for a person who understands CSS

    February 25, 2018 at 4:58 pm #917452
    BritaKossmann

    ?

    February 25, 2018 at 6:44 pm #917492
    Basilis

    Hi,

    I am not sure where you need to position it, even if I read the ticket again and again.
    While we do not know about Rocket Sience, we are pretty good on CSS so if we understand properly what you need to do
    and provide us with the right details and not Rocket Creation description, we will be more than able to help you out!

    Thank you very much for your understand, we do wait for the proper description of the issue.

    Best regards,
    Basilis

    February 25, 2018 at 10:10 pm #917596
    BritaKossmann

    Vertical alignment with the BOTTOM of the dropcap.
    What exactly is it, you dont understand?

    February 26, 2018 at 11:31 am #917772
    Victoria

    Hi BritaKossmann,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.tab_inner_content.invers-color strong {
  line-height: 62px;
}
.drops + p, .tab_inner_content.invers-color p:nth-child(2n) {
  margin-top: -10px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 7, 2018 at 7:16 pm #923236
    BritaKossmann

    Still not working…but hey…your solutions become more and more interesting ..
    http://bk-psychotherapie.de/temp/dropcap4.jpg

    btw: of course i had to remove your CSS again cause i cant leave that live..

    March 14, 2018 at 8:48 am #926485
    Ismael

    Hi,

    Please try this css code.

    .av_dropcap2 + strong {
    top: 20px;
    position: relative;
}

    Best regards,
    Ismael

    April 4, 2018 at 2:28 pm #937183
    BritaKossmann

    Thanks.

    But nevertheless i have to say that its not the best sign when supporters needed almost 4 weeks, 4 involved moderators and a lot of fails to finaly provide two lines of CSS.

    April 5, 2018 at 6:11 am #937476
    Rikard

    Hi,

    Thanks for the helpful feedback. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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