Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1414138

    Hi,

    I want to display the first two widgets side by side on mobile view and centre the bottom widget.

    I’ve used the following CSS:

    @media only screen and (max-width: 767px) {
    #footer .container {
    display: flex;
    flex-wrap: wrap;
    }

    #footer .flex_column.av_one_third:first-child {
    width: calc(43%);
    float: left !important;
    clear: none;
    }

    #footer .flex_column.av_one_third:nth-child(2) {
    text-align: right;
    }

    #footer .flex_column.av_one_third:last-child {
    width: 100%;
    text-align: center;
    }

    #top .wpcf7-spinner {
    position: absolute;
    bottom: 25px;
    left: 15px;
    }

    #footer .flex_column#text-4:nth-child(2) {
    text-align: right;
    margin-right: 0;
    margin-left: 20px;
    }

    }

    What is wrong here? I’ve spent several hours trying to fix this and have given up. The top two don’t go side by side as you helped me with this website http://www.rosevel.ie

    This website works perfectly.

    Also – can I have the contact form have a whit background so it’s easier to see?

    #1414147

    Hey ballindigital,
    Thanks for the link to your site I adjusted your css to this:

    @media only screen and (max-width: 767px) {
        .responsive #top #wrap_all #footer .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 90%;
        	max-width: 90%;
        }
    
        .responsive #top #wrap_all #footer .flex_column.av_one_third:first-child {
    	    width: calc(50%);
    	    clear: none; 
    	}
    
        .responsive #top #wrap_all #footer .flex_column.av_one_third:nth-child(2) {
    	    text-align: right;
    	    width: calc(50%);
        }
    
        .responsive #top #wrap_all #footer .flex_column.av_one_third:last-child {
            width: 100%;
            text-align: center;
        }
    
        #top .wpcf7-spinner {
            position: absolute;
            bottom: 25px;
            left: 15px;
        }
    
    	.responsive #top #wrap_all #footer .flex_column#text-4:nth-child(2) {
    	    text-align: right;
    	    margin-right: 0;
    	    margin-left: 20px;
    	}
    }

    For the contact form, I believe that you wanted the form fields white so I added this css

    #top #footer.footer_color input[type='text'],
    #top #footer.footer_color textarea ,
    #top #footer.footer_color input[type='email'] {
    	background-color: #fff;
    }
    #top #footer.footer_color .wpcf7-quiz-label {
    	visibility: hidden;
    }

    Please clear your browser cache and check.

    Best regards,
    Mike

    #1414160

    Thank you Mike!

    #1414162

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Display Widgets side by side in Mobile View’ is closed to new replies.