Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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.

    #1401171

    Hey Yannick,

    I’m not sure I fully understand the problems you are having, could you post screenshots highlighting them please?

    Best regards,
    Rikard

    #1402045

    Hi 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:
    Scherm-afbeelding-2023-03-22-om-19-52-54

    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.
    Scherm-afbeelding-2023-03-22-om-19-53-10

    #1402361

    Hi,

    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,
    Rikard

    #1402553

    Hoin 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;
    }*/
    #1402578

    Hi,
    Thanks for the feedback, at the end of your css above there is a rouge */:
    Enfold_Support_745.jpeg
    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:
    Enfold_Support_747.jpeg
    Enfold_Support_749.jpeg
    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,
    Mike

    #1402584

    Hi 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.

    #1402612

    Hi,
    I’m not seeing this on your homepage:
    Enfold_Support_757.jpeg
    are you seeing this on a different page?

    Best regards,
    Mike

    #1402614

    Sorry, yes, I see that on a different site, https://www.orthomedtherapy.ro/
    The problem is on mobile version.

    #1402622

    Hi,

    @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:
    Enfold_Support_759.jpeg
    then select the mobile option and enter a different value:
    Enfold_Support_761.jpeg
    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

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