-
AuthorPosts
-
March 13, 2023 at 10:15 pm #1401086
Hi this topic is related to #1401082. It is about the same website ceramicasa.nl
#2:
On a number of pages (maybe a lot) something strange happens with the texts in blocks. The texts are cut off by an image or another block. This while the block must of course continue until the text stops, just like on the desktop version.If you look at https://ceramicasa.nl/tegels/ and you scroll to about half you will see:
” TEGELS VOOR BINNEN.
De keramische tegels voor binnen hebben een afmeting van 6 of 9mm dik, hoe groter de tegel hoe dunner.
De tegels kunnen zowel op de vloer als op de wanden toegepast worden, hierdoor kan je tegels makkelijk combineren met elkaar. Kies je voor de klassieke marmerlook tegel of ga je liever voor een betonlook?”Only on the mobile view does the image go over the text and not everything is visible.
On the same page a little lower it says: “TEGELS VOOR BUITEN.” and there the text spills out of the gray block.
#3
On that same page, if you scroll a little further, there is a header: KERAMISCHE KEUKENBLADEN.This is stuck to the button that is located somewhere else on the desktop version.
Just click through the site, there are more of these weird alignment problems that I would actually expect that they should not occur due to Enfold’s responsive construction.
March 14, 2023 at 6:52 pm #1401171Hey Yannick,
I’m not sure I fully understand the problems you are having, could you post screenshots highlighting them please?
Best regards,
RikardMarch 22, 2023 at 7:54 pm #1402045Hi sorry for the late response, this is what is mean:
you look at https://ceramicasa.nl/tegels/ and you scroll to about half you will see:
Only on the mobile view does the image go over the text and not everything is visible.
On the same page a little lower it says: “TEGELS VOOR BUITEN.” and there the text spills out of the gray block.
March 24, 2023 at 4:35 pm #1402361Hi,
Thanks for the clarification. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { .flex_column { padding: 0; height: auto; } }
Best regards,
RikardMarch 26, 2023 at 3:41 pm #1402553Hoin Rikard,
I dont see any difference?
This is all the CSS mabye somthing conflicting. Above the list is all the mobile css.
@media only screen and (max-width: 767px) { .flex_column { padding: 0; height: auto; } } @media only screen and (max-width: 767px) { #top #wrap_all .flex_column_table .flex_column { display: flex; flex-direction: column; justify-content: center; } } /*Topmenu disable line */ .av-main-nav li:hover .avia-menu-fx, .current-menu-item > a > .avia-menu-fx, .av-main-nav li:hover .current_page_item > a > .avia-menu-fx { visibility: hidden !important; background-color: transparent !important; border-color: transparent !important; } /*Topmenu bottom border*/ #header_meta { border-bottom-width: 0px; } /*Menu bottom border*/ #header_main { border-bottom-width: 0px; } /*Menu ruimte tussen woorden*/ span.avia-menu-text { margin: 0px 10px 0px 10px; } /*Basic font*/ .avia_textblock { line-height: 30px; } /*Custom font laden - Header*/ .thunder-lightlcitalic-webfont { font-family: 'thunder-lightlcitalic-webfont'; font-size: 70px; vertical-align: text-top; } /*Custom font laden - Blokken home*/ .thunder-lighthc-50 { font-family: 'thunder-lighthc'; font-size: 50px; } .thunder-lighthc { font-family: 'thunder-lighthc'; font-size: 65px; } /*Custom font laden - Pages*/ .thunder-lightlcitalic-webfont-60 { font-family: 'thunder-lightlcitalic-webfont'; font-size: 60px; } .thunder-lightlc-60 { font-family: 'thunder-lightlc-webfont'; font-size: 60px; } .thunder-lightlc-70 { font-family: 'thunder-lightlc-webfont'; font-size: 60px; } /*Home - Blokken witte rand*/ .av-layout-grid-container .flex_cell { border-left: 4px solid white !important; border-right: 4px solid white !important; border-top: 8px solid white !important; border-bottom: 8px solid white !important; } /*Text shadow*/ #textshadow .av-special-heading-tag { text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5) !important; } /*Text shadow - MASONRY*/ .av-masonry-entry .av-masonry-entry-title { text-shadow: 0px 0px 10px rgb(0 0 0 / 50%) !important; } /*Menu size fix*/ .html_header_top.html_bottom_nav_header #header_main_alternate .main_menu>div,.html_header_top.html_bottom_nav_header #header_main_alternate .main_menu ul:first-child { height: 60px; } /*Image borders*/ img.avia_image { border-radius: 0 !important; } /*Image blokken - Afstand tekst naar afbeelding*/ #imageclose .avia-image-container.avia-align-center { display: block; margin: 0px auto -15px auto; text-align: center; clear: both; } /*Contact form*/ .avia_ajax_form p { color: #ffffff!important; } #top div .av-light-form .input-text, #top div .av-light-form input[type='text'], #top div .av-light-form input[type='input'], #top div .av-light-form input[type='password'], #top div .av-light-form input[type='email'], #top div .av-light-form input[type='number'], #top div .av-light-form input[type='url'], #top div .av-light-form input[type='tel'], #top div .av-light-form input[type='search'], #top div .av-light-form textarea, #top div .av-light-form select, div div .av-light-form .button { border-color: #ffffff; } /* Table rows */ #top .avia-table tr:nth-child(odd) { background: #d7d7d7 !important; } #top .avia-table tr:nth-child(even) { background: #d7d7d7 !important; } /* Table border */ #top .avia-table tr th, #top .avia-table tr td, #top .avia-table tr { border: none !important; box-shadow: 0px 0px 0px 0px #d7d7d7; } td { font-size: 24px; } /* Table - padding */ .avia-data-table.avia_pricing_minimal th, .avia-data-table.avia_pricing_minimal td { padding: 3px; } /* Table text alignment */ .avia-data-table td { text-align: left !important; } /* Footer styling @media only screen and (min-width: 990px) { #footer .container { width: 100% !important; max-width: 100% !important; padding: 150px !important; }} /* Widget styling */ #top .widget_nav_menu li { line-height: 0.9; font-size: 20px; }*/
March 26, 2023 at 10:10 pm #1402578Hi,
Thanks for the feedback, at the end of your css above there is a rouge */:
please remove this if it is in your css.
But this didn’t affect your site for my mobile Android, as I found no issues like in your screenshots:
If you are still seeing the error try clearing your browser cache following these steps for Safari and note step 4 where you will Clear the History.Best regards,
MikeMarch 26, 2023 at 11:56 pm #1402584Hi there,
The 3 columns under the slider looks good on desktop, but in mobile version it comes over the slider and I don t know how to lower them, so I can see the full image in the slider. Please help.March 27, 2023 at 11:08 am #1402612March 27, 2023 at 11:18 am #1402614Sorry, yes, I see that on a different site, https://www.orthomedtherapy.ro/
The problem is on mobile version.March 27, 2023 at 12:05 pm #1402622Hi,
@orthomedtherapyro, Oh, I see this is not your thread…
To adjust the negative margin for the 3 columns for mobile, go to the first column Edit Column ▸ Row Settings ▸ Row Margins where the default value for the top margin is -200px:
then select the mobile option and enter a different value:
This will move the column down, but your slider captions have too much text to show well on mobile you will probably want to create a second slider to only show on mobile with much less text or use a different slider element for mobile.
If you have any further questions please create a new thread as each user and issue should have its own thread and this thread is already very long.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.