Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 29, 2015 at 7:15 pm #451767
    wmsgeorge

    I have one page where I am listing multiple sections. I am separating each section with a color section block. That color section block is a color and I put a heading in there so users can see what the next section is about. Problem is after the 3rd color section the responsive design stops working. Making my 1/3 blocks all squeeze into and on top of each other on mobile devices.

    When I removed the color sections the responsive design works again. You can see that on the page labeled New in the admin.

    I have current Enfold theme and current WP version as of 5/29/15

    Please advise.

    June 1, 2015 at 10:24 am #452441
    Ismael

    Hi wmsgeorge!

    Thank you for using Enfold.

    Can you please provide a screenshot of the issue? Site looks fine when I checked it. The columns respond properly.

    Cheers!
    Ismael

    June 1, 2015 at 6:20 pm #452694
    wmsgeorge
    This reply has been marked as private.
    June 1, 2015 at 6:31 pm #452698
    dwebprojects

    Dear Sir,

    How can id do this with enfold theme:http://www.sundayschoolwales.org/en/

    Pls watch the season 3 part: now fullwidth section with white bg and top borders and has another backround too: #ECF0F1

    Ty,

    Daniel

    June 3, 2015 at 9:02 am #453619
    Basilis

    Hey dwebprojects,

    Please open a support ticket with your issue, so we can assist.

    Thanks a lot for your understanding.

    Cheers!
    Basilis

    June 3, 2015 at 10:58 pm #454125
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
div .av_one_third {
  width: 100%;
}}

    Best regards,
    Yigit

    June 3, 2015 at 11:36 pm #454136
    wmsgeorge

    Hey Yigit, Thank you. The code you provided helped make the website look proper on my phone now. I added the other two sections which you can see below. Is that correct though?

    Also, I noticed 2 things

    1 – in the sections after the about: the videos are not aligned properly. They look pushed over to the right.

    2 – just over the mobile phone px size the videos are all still squeezed together after the about section. But the responsiveness in the top 2 sections is working perfectly still.

    Do I need another css function for another size as well?

    @media only screen and (max-width: 480px) {
div .av_one_third {
  width: 100%;
}
div .av_one_half {
  width: 100%;
}
div .av_one_fourth {
  width: 100%;
}}
    June 5, 2015 at 5:32 pm #455185
    Andy

    Hey!

    1. Use this code:

    div .av_one_third {
margin-left: 0;
}

    2. You need to adjust the media querries: 

    @media only screen and (max-width: 480px)

    If you need the code for a larger screen then use for example (max-width: 760px) insetad of (max-width: 480px). See more information about this here.

    Best regards,
    Andy

    June 9, 2015 at 1:46 am #456405
    wmsgeorge

    Cool. Everything was close to working. When I added that margin left to be 0 it fixed the alignment on mobile devices but then made all the videos right next to each other on the desktop version. Bummer. I will deal with the misalignment if there is no fix, thank you all for all your help.

    • This reply was modified 9 years, 5 months ago by wmsgeorge.
    June 9, 2015 at 4:19 pm #456783
    Yigit

    Hi!

    Please use the code Andy posted as following 

    @media only screen and (max-width: 480px) {
div .av_one_third {
margin-left: 0;
}}

    Regards,
    Yigit

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