Problem with responsive design for small screens

  • Igor
    Igor
    Newbie
     
    56 points

    I see the problem with responsive design for small screens (smartphones and 11′ netbooks). The screens have horizontal scrolling. Banners do not decrease in proportion to the screen. The text creeps to the other elements of the site. My website is cars76.ru. The solution to the problem is essential.


    Josh
    Josh
    Super Guru
     
    13,886 points

    Hello Igor,
    Try below code under Theme Setup >General Setup >Custom css >Footer Styles

    <script>
    jQuery('center img').addClass('img-responsive');
    </script>


    Igor
    Igor
    Newbie
     
    56 points

    Hello Josh,
    Thanks for help. This solved the problem partially. Banners of the main page become adaptive. The problem remained for pages “make”. For sample http://cars76.ru/make/hyundai/.

    In addition, I noticed that the banners are displayed not all. How to make, all banners were displayed on small screens?


    Josh
    Josh
    Super Guru
     
    13,886 points

    Try this

    <script>
    jQuery('img').addClass('img-responsive');
    </script>


    Igor
    Igor
    Newbie
     
    56 points

    Hello Josh,
    This script violates the icons of brands. See attachment


    Igor
    Igor
    Newbie
     
    56 points

    Screenshot

    Attachments:
    You must be logged in to view attached files.

    Igor
    Igor
    Newbie
     
    56 points

    <script>
    jQuery(‘center img’).addClass(‘img-responsive’);
    </script>

    This script helped today. Yesterday was different. Apparently it was caching. However, the head banner is not shown on small screens. Also, banners that are installed in the widget of the footer not shown on small screens. Can you do something to fix this problem?


    Igor
    Igor
    Newbie
     
    56 points

    <script>
    jQuery(‘center img’).addClass(‘img-responsive’);
    </script>

    Problem on Monitor Samsung SyncMaster 943N. This script displays incorrect icons of manufacturers. Some icons have offset. This 19 inch square monitor.

    On another Samsung monitor (oblong screen) the problem is not detected.


    Josh
    Josh
    Super Guru
     
    13,886 points

    Hello Igor,
    Your site seems to be working correctly >>http://www.responsinator.com/?url=cars76.ru%2F
    I can’t seem to locate the header banner you are refeering to


    Igor
    Igor
    Newbie
     
    56 points

    Hello Josh,
    Thanks for reply.

    Is it correct “viewport” to your code <meta name=”viewport” content=”width=device-width, initial-scale=1″?

    May be <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>?


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.