Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1077156

    Hello Team ,
    could you help me with a maybe more complex issue?
    referring to the page
    https://mariadragan-uebersetzungen.de/1-uebersetzung-literarischer-texte-und-technischen-dokumentationen/
    there are 4 paragraphs with the capture title 1)LITERARISCHE BOTSCHAFT UMZUSETZEN! 2)MEISTERSCHAFT UND ERFAHRUNG 3)TERMINOLOGIE IM BEREICH LITERARISCHER ÜBERSETZUNGEN 4)TERMINOLOGIE
    i want to bring these paragraphs together like in this webpage
    https://www.expressuebersetzer.com/deutsch/lektorat.html
    the 4 paragraphs are 1)TERMINOLOGIETREUE, 2)FACHKOMPETENZ TRIFFT GLOBALE ERFAHRUNG 3)INDIVIDUELLE PROJEKTBEGLEITUNG
    4)KUNDENMEINUNGEN
    if you see on my https://mariadragan-uebersetzungen.de/1-uebersetzung-literarischer-texte-und-technischen-dokumentationen/
    there isn’t any justified centered text, the texts are too far apart,
    could you pls look in the backend?
    hope that the task its not too difficult, but I am looking forward to see how I can make this work with enfold,
    could you pls send me in private the modifications that you made in the backend? like padding,
    alignment of the containers, the distances and so on? or is it easier another way?
    hoping for your response soon

    best regards

    #1078097

    Hey barabasone,
    I took a look at your page and added the custom class “left-forth” & “right-forth” to your two 1/4 columns in order to move them up with this css in your Quick CSS:

    .left-forth,.right-forth {
        margin-top: -80px !important; 
    }

    But the main difference I see between your page and your example is that in your example the text wraps around the icons so there is more room for text, but the icon box doesn’t allow this.
    I would suggest making your columns larger so the text is not so cramped, perhaps 1/3 instead of 1/4
    I hope this helps.

    Best regards,
    Mike

    #1078232

    Hello Mike,

    thanks, its better now. thank you
    could you also catch a glimpse at the smartphone version?
    1) on the display there if you see the text, its all overlapped.
    can you fix this with y quick css?
    2) I put impressum and datenschutzerklärung in the socket below, but the font size is too big, could you pls tell me how I could change the fontsize of both them?

    thanks in advance
    best regards
    Bogdan

    #1078268

    Hi,
    I took another look at the section as mobile, and could see the issue. I removed your -180px bottom margin for better control and added media queries to the css so that as mobile the width is 100% so the sections stack and then at labtop (1440px) they stack the way you wanted. I choose 1440px because when smaller than that to two 1/4 columns are so narrow it’s hard to read.
    Please clear your browser cache and check. Please let me know if you agree about the width, we can change it if you want.

    here’s what I added:

    @media only screen and (min-width: 1440px) { 
    .left-forth,.right-forth {
        margin-top: -240px !important; 
    }
    }
    @media only screen and (max-width: 1439px) { 
    .left-forth,.right-forth,.top-left,.right-top {
    width: 100% !important;
    }
    }

    Best regards,
    Mike

    #1078851

    uf not so easy at all, thank you very much for your support!
    if you take another look at the section as mobile, there is a problem with the photos in the grid container, they don’t show exactly as in the laptop version
    the 1 Foto stays above the text , the second one lay below the next text, after that there is successively another and so on,
    so the order is lost, how could I bring this under control like in the laptop version?

    thanks in advance
    Bogdan

    #1078981

    Hi,
    For your grid row, I assume that you want to order them as:
    image > text > image > text
    for mobile.
    I have added this css to your Quick CSS to correct:

    @media only screen and (max-width: 767px) {
    #top.home #av-layout-grid-2.entry-content-wrapper,#top.home #av-layout-grid-4.entry-content-wrapper {
        display: flex !important; 
        flex-wrap: wrap !important; 
        }
        .flex_cell.avia-builder-el-first {
            order: 2 !important; 
        }
        .flex_cell.avia-builder-el-last {
            order: 1 !important; 
        }
    }

    Please clear your browser cache and check.

    Best regards,
    Mike

    #1079743

    thanks it did work very fine.
    how can I move the book symbol a little bit further down on the first page if you entere the mobile you ll see that the red booksymbol is over the text
    and how can I make the fontsize smaller on the page 1) Übersetzung literarischer Texte und technischen Dokumentationen

    the text is the title
    Übersetzung in verschiedenen Fremdsprachen . if you see it overlaps the red margin…
    thanks in advance

    Bogdan

    #1080196

    Hi,
    I added a custom class to your red book icons “red-book” so that it will be easier to control. I then added this css for mobile devices:

    @media only screen and (max-width: 767px) { 
    .red-book {
    margin-top: 20% !important;
    }
    }

    But I have a question about these two icons, so there are two of them but the right one is off the screen until 1130px, so it is not showing for mobile or tablet. Did you want it to show? For desktop when they both show they seem a little off, that is not quite on the sides of the heading but also not quite under the heading. Please see the screenshot in Private Content area. Is this how it looks to you?

    For the heading font size to be smaller on mobile I have added this css:

    @media only screen and (max-width: 767px) {
    #top #wrap_all .av-layout-grid-container .av-inherit-size .av-special-heading-tag {
        font-size: 0.6em !important; 
    }
    }

    The size was “0.8em” and the code above sets it to “0.6em” please feel free to adjust if you wish.
    I didn’t see a red margin or a overlap, so I’m not sure what your last question was, please explain.

    Best regards,
    Mike

    #1081083

    Hello Miike,
    you are right on wider screens it shows a little bit off. (like on my girlfriends screen because its wider, on Mac book pro retina it does show normal,
    but pls ajust the red book symbols if you think its not right.
    if I enter the1/4 column for the second symbol red book , the left padding is set at 708 px
    pls ajust it if needed.
    on mobile its ok with one symbol.
    but there is still this title too big on the mobile screen KUNDENEMPFEHLUNGEN( it goes too far to the right) The N letter is missing
    pls help me
    Referring to your text: didn’t see a red margin or a overlap, so I’m not sure what your last question was, please explain.
    if you go on mobile( I have a Huawei 8 lite)
    pls go on the page 1) Übersetzungen in verschiedenen Fremdsprachen
    there you will see that the text goes beyond the red border of the box

    have a nice day
    best regards

    Bogdan

    #1081133

    Hi,
    I found the text and red box, I see that your font size was set to 40px so I adjusted to 24px, then in the “Anzeigeoptionen” tab to can set the font size based on screen size, I tested and found these sizes to work better:
    2019-03-20-212847
    At one point the text was still a little off because of the padding so I used this css to adjust it:

    @media only screen and (min-width: 766px) and (max-width: 800px) { 
    #top.page-id-365 .avia-builder-el-0 {
    padding: 15px !important; 
    }
    }
    #top.page-id-365 .ubersetzungen p {
    text-shadow: 1px 0 0 currentColor !important; 
    }

    Please clear your browser cache and check.

    To adjust “KUNDENEMPFEHLUNGEN” for mobile I added this css:

    @media only screen and (max-width: 424px) { 
    #biographie > div > div > div > div > div.flex_column.av_one_half.flex_column_div.av-zero-column-padding.avia-builder-el-55.el_after_av_one_fourth.el_before_av_one_fourth > div > h2 {
    font-size: 20px !important; 
    font-weight: 700 !important; 
    }
    }

    For the two book icons I removed the extra padding between them so they both show lined up nice under the heading, and the right one is hidden for mobile when they would be in a single column in the middle with this css:

    .red-book-r-column {
    padding: 0px !important;
    }
    @media only screen and (max-width: 767px) { 
    .red-book-r {
    display: none !important;
    }
    }

    Please clear your browser cache and check.

    Best regards,
    Mike

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