Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 2, 2016 at 2:38 pm #642089
    GOWD

    Hi, I am having some responsive issues on my website when viewed on a tablet in Portrait.

    Some sections seem to display fine like our work on the homepage but other sections don’t stack at all.

    I have created a password protected blog post with screenshots. Link and password are in the private content.

    June 2, 2016 at 4:37 pm #642138
    Vinay

    Hey Denis,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    
/* line break issue*/
p {
     word-wrap: break-word;
}

@media only screen and (max-width: 980px) {
/* Testimonials */
.avia-testimonial-content {
      width: 100%;
      margin-top: 30px;
}
/* Service */
.avia-icon-list .iconlist_content_wrap {
    width: 100%;
    padding-top: 20px;
}
/*footer*/
#footer .flex_column {
	width: 100% !important;
}}

    On the homepage if you use a image as background the browser tries to fill the image and it is expected to cutoff in some screens as the image need to fit both height and width. Instead use an image element inside a colorsection.

    Best regards,
    Vinay

    June 3, 2016 at 10:02 pm #642732
    GOWD

    Hi Vinay, thanks for your response.
    I have applied your code and had some success and some issues. I have updated the Blog post with screenshots for you to take a look at. Thanks.

    June 6, 2016 at 5:45 am #643269
    Ismael

    Hi,

    Do you want to the cells to go on top of each other on tablet view? Add this in the Quick CSS field:

    @media only screen and (max-width: 1024px) {
.responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    margin: 0;
    height: auto !important;
    overflow: hidden;
    padding-left: 8% !important;
    padding-right: 8% !important;
}
}

    For the testimonial page, use this:

    @media only screen and (max-width: 1024px) {
.responsive .avia-testimonial-wrapper, .responsive .avia-testimonial-row, .responsive .avia-testimonial {
    display: block;
    width: 100%;
    float: none;
}
}

    I can’t reproduce the issue in the footer section. All columns are aligned properly.

    Best regards,
    Ismael

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