Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • February 23, 2014 at 10:13 am #228096
    ZakP

    Hi Guys,

    On my website the icons and content comes out of the div on mobile devices. This happens in the services div on the services page and in the testimonials div on the homepage. Here’s an idea of what it looks like image
    website: accountssurgery.co.uk

    Please help. Thanks

    February 24, 2014 at 4:00 pm #228512
    Yigit

    Hey ZakP!

    Please update Enfold to the latest version 2.5.4 and let us know if issue remains
    see http://kriesi.at/documentation/enfold/updating-your-theme-files/

    Best regards,
    Yigit

    February 25, 2014 at 12:21 am #228743
    ZakP

    Hi Yigit!

    I’ve updated the theme but the issue still persists. Kindly help :-)

    Thank You

    February 25, 2014 at 6:17 am #228881
    Ismael

    Hey!

    Please add this on Quick CSS:

    @media only screen and (max-width: 767px) {
div#av_section_1.avia-section.main_color.avia-section-default.avia-no-shadow.avia-builder-el-5.el_after_av_one_full.avia-builder-el-last.container_wrap.fullsize {
min-height: 900px;
}
}

    Remove browser cache then reload the page a few times.

    Regards,
    Ismael

    February 25, 2014 at 8:44 am #228907
    ZakP

    Hi Ismael,

    Thank for the help, unfortunately, the issue is still there. The service icons are actually going beneath the footer too.

    February 26, 2014 at 2:34 pm #229560
    ZakP

    Hi guys,

    Just to add to this, the text is also now cut off on the services pages.

    Thank you.

    February 27, 2014 at 7:21 pm #230222
    ZakP

    Hi guys,

    Could you kindly provide me an update on the issues?

    Thanks :-)

    February 27, 2014 at 7:25 pm #230226
    Yigit

    Hi!

    Please go to Enfold theme options > General Settings and choose to display Responsive layout

    Regards,
    Yigit

    February 28, 2014 at 4:11 pm #230639
    ZakP

    Thanks Yigit,

    That has brought the text back. Any ideas about stopping the icons coming out of the div for mobile devices?

    February 28, 2014 at 4:17 pm #230642
    Yigit

    Hi!

    On which device have you tested your website? I have just checked it on my iphone 4 and it does look fine. Please see screenshots below
    Portrait mode- http://i.imgur.com/X4TBILR.png
    Landscape mode- http://i.imgur.com/Ue9D8KJ.png

    Regards,
    Yigit

    March 1, 2014 at 9:00 am #230994
    ZakP

    Hi

    Here are screenshots of my iPhone of the homepage (testimonial section) and of the services page (service icons):

    Home Page (the rest of the text is cut off, it is not properly visible here as it white on white background))

    Services Page

    Thanks :-)

    • This reply was modified 10 years, 11 months ago by ZakP.
    March 2, 2014 at 4:29 am #231178
    Ismael

    Hi!

    Please switch your website to responsive layout again. We need to inspect it. The code I provided should fix the section height on mobile menu. Edit the color section with the issue then look for “For Developers: Section ID”, add something like “awesome-section”. Use this on Quick CSS:

    @media only screen and (max-width: 767px) {
#awesome-section {
min-height: 900px;
height: 900px;
}
}

    Best regards,
    Ismael

    March 2, 2014 at 9:41 am #231233
    ZakP

    Hi Ismael!

    Thank you for your help unfortunately the problem is still there.

    Thank You

    • This reply was modified 10 years, 11 months ago by ZakP.
    March 5, 2014 at 4:18 pm #232766
    Yigit

    Hey!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 480px) { 
#awesome-section {
height: 1470px; 
background-size: cover; }}
@media only screen and (max-width: 767px) { 
#awesome-section {
height: 1070px; 
background-size: cover; }}

    Regards,
    Yigit

    March 5, 2014 at 4:45 pm #232794
    ZakP

    Hi Yigit,

    Thanks! Unfortunately it hasn’t resolved the problem, Should I create you guys a user account?

    March 5, 2014 at 4:48 pm #232796
    Yigit

    Hey!

    Please do so and post it here privately. Have you tried flushing browser cache on your mobile device after applying the code?

    Cheers!
    Yigit

    March 6, 2014 at 1:07 am #233020
    ZakP
    This reply has been marked as private.
    March 6, 2014 at 6:33 pm #233341
    Yigit

    Hi!

    Please flush browsers cache on your mobile device and check your website now. It does look fine on my end. I have adjusted the code at the bottom of Quick CSS slightly

    Regards,
    Yigit

    March 7, 2014 at 1:10 am #233437
    ZakP

    Hi Yigit,

    On the homepage I can now see 3 of the testimonials but the 4th is still cut off:

    Home Page

    As for the services page it seems to be the same:

    Services 1

    Services 2

    P.S thank you for all your help :-)

    March 7, 2014 at 4:59 pm #233839
    Yigit

    Hey!

    Following code should solve the issue 

    @media only screen and (max-width: 767px) {
#awesome-section {
height: auto !important; }}

    Best regards,
    Yigit

    March 12, 2014 at 12:24 pm #236259
    ZakP

    Thank you so much Yigit!

    That has worked, one thing remains which is that on the services page there is a white gap between the service icons and the footer on the desktop version of the site. This issue is not present on the home page with the testimonials.

    Thanks again!

    March 14, 2014 at 5:04 pm #237737
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .page-id-1302 #awesome-section { background-size: cover!important; }

    Best regards,
    Yigit

    March 14, 2014 at 11:32 pm #237858
    ZakP

    You guys are awesome! :-)

    Thanks so much!!!!

  • Author
    Posts
Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Icons and content coming out of div on mobile devices’ is closed to new replies.