-
AuthorPosts
-
March 10, 2019 at 11:36 pm #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 soonbest regards
March 13, 2019 at 6:20 am #1078097Hey 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,
MikeMarch 13, 2019 at 11:21 am #1078232Hello 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
BogdanMarch 13, 2019 at 1:41 pm #1078268Hi,
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,
MikeMarch 14, 2019 at 8:21 pm #1078851uf 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
BogdanMarch 15, 2019 at 4:30 am #1078981Hi,
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,
MikeMarch 18, 2019 at 1:07 am #1079743thanks 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 Dokumentationenthe text is the title
Übersetzung in verschiedenen Fremdsprachen . if you see it overlaps the red margin…
thanks in advanceBogdan
March 19, 2019 at 4:07 am #1080196Hi,
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,
MikeMarch 20, 2019 at 11:09 pm #1081083Hello 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 boxhave a nice day
best regardsBogdan
March 21, 2019 at 3:59 am #1081133Hi,
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:
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 -
AuthorPosts
- You must be logged in to reply to this topic.