Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 31, 2023 at 2:34 pm #1396036
    TakiwaSoulArt

    Hi,

    I need help again with Responsive customization of a website – a onepager.

    1. customization in the offers section (screenshot on the normal laptop is in the dropbox – screenshot 1). I used a ready background image and set a minimum height and spacing from the bottom in the columns. This worked until the middle screen size in the customizer (screenshot 2). From 768px and smaller it is not possible to place the text inside the area above the background image. Either there is too much space under the text (screenshot 3) or the text goes into the image (screenshot 4). What can be done?

    2. at the customer recommendations the distances are not correct – see screenshot 5 and the font is too big. The round images are partly cut off at the top.

    3. if you scroll down on the mobile, there are partly white or brown thin stripes between the color sections – I don’t understand that either.

    That was now unfortunately a bit much and maybe I could have solved the part with the offers also differently …

    In advance, thank you very much – all links are in private content.

    Many greetings, Sabine

    Translated with http://www.DeepL.com/Translator (free version)

    February 4, 2023 at 1:46 am #1396624
    Mike

    Hey Sabine,
    Thanks for your patience, when I check your site between 1024px – 768px before the 3 columns become single columns the text for most of the columns is too much pushing some of the buttons into the lower image. True one column has extra space above the lower image but the text is less and the columns are equal height, I assume this is important.
    I recommend changing the brake into a single column earlier around 1024px to correct.
    Try this css:

    @media only screen and (max-width: 1024px){
.responsive #top #wrap_all #angebot .flex_column.av_one_third {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
}
.responsive #top #wrap_all #angebot .flex_column_table_cell {
    float: none;
    display: table-row;
}
}

    For 768px the height is still a lot, try adding the lower image as a image block and add a background color to the column, instead of adding the large image as a background image for the whole column, this way the lower image will stay under the button.

    Best regards,
    Mike

    February 8, 2023 at 12:32 pm #1397157
    TakiwaSoulArt

    Hey Mike,

    thank you for answering. The idea with the colored background and the separate image is wonderful and I think it is the solution for all screen widths. I will try it.

    I still need help for question 2:
    at the customer recommendations the distances are not correct – see screenshot 5 and the font is too big. The round images are partly cut off at the top.

    Is it possible to have help for this point?

    Thank you so much and have a nice day.

    Best regards, Sabine

    February 8, 2023 at 5:12 pm #1397201
    Mike

    Hi,
    Please try this css

    @media only screen and (max-width: 430px){
.responsive #top #wrap_all #referenzen > .container {
	width: 95%;
    max-width: 95%;
}
#referenzen .flex_column {
	padding: 0 !important;
	margin: 0;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    February 8, 2023 at 6:00 pm #1397208
    TakiwaSoulArt

    Hi Mike,

    thank you so much – it works perfect.:)

    Best regards, Sabine

    February 9, 2023 at 4:00 am #1397255
    Ismael

    Hi,

    Great! Glad to know that the solution is working. Please feel free to open another thread if you have more inquiries about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘various’ is closed to new replies.