Support » Theme: Storefront » Problem on touch screen devices with the background width and image

  • Resolved atheerhuwa

    (@atheerhuwa)


    Hi,
    I am having the following problem with the following shop page:
    https://taharrur(dot)com/ar/shop

    On some of the mobile browsers the background width is too big and the background image slides to the left of the shop in the Arabic shop page, so the shop is not visible without sliding to the right side.

    The background image is also only partly visible. I am using translatepress but tried different translation plugins and settings with no use.

    The site is English/Arabic and I am using a Storefront Child folder with style.css and style-rtl.css in it. Here is what I wrote in the child functions.php:

    if (is_rtl()){

    $parent_style = ‘storefront-style’;

    // wp_dequeue_style( ‘storefront-child-style’ ); // I tried commenting this out or commenting out wp_style_add_data

    wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style-rtl.css’, array( $parent_style), get_the_time() ); // ‘storefront-child-style’ does not work

    wp_style_add_data( ‘storefront-child-style’, ‘rtl’, ‘replace’ ); // // I tried commenting this out or commenting out wp_dequeue_style

    }
    }

    I am using rtlcss.com to generate the style-rtl.css file.

    I also added the following to the beginning of style-rtl.css but it did not solve the issue:
    body{direction: rtl !important;
    unicode-bidi: bidi-override !important;}

    body.custom-background {
    width:100%;
    background-color: #eeeeee;
    background-position: right center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    }

    The issue appears on Safari, Firefox, Edge, Samsung mobile and UC Browser, but the page works just fine in Chrome and Opera mobile browsers!

    Any help is much appreciated.

    • This topic was modified 5 months, 3 weeks ago by atheerhuwa.
    • This topic was modified 5 months, 3 weeks ago by atheerhuwa.
    • This topic was modified 5 months, 3 weeks ago by atheerhuwa. Reason: typos
    • This topic was modified 5 months, 3 weeks ago by atheerhuwa.
    • This topic was modified 5 months, 3 weeks ago by atheerhuwa.
    • This topic was modified 5 months, 3 weeks ago by atheerhuwa.
    • This topic was modified 5 months, 3 weeks ago by atheerhuwa.
    • This topic was modified 5 months, 3 weeks ago by atheerhuwa.
    • This topic was modified 5 months, 3 weeks ago by atheerhuwa.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi, are you able to provide a screenshot of the issue you’re seeing? I checked out the site in Firefox on my desktop PC decreasing the browser width as well as checking the site in Safari on my iPhone 7 and the shop appears to display correctly for me at various different browser widths.

    If you are able to get a screenshot, you can use https://snipboard.io or similar to share the links here.

    Hi Jarret,

    I put back the hand held navigation at the bottom of the website for the problem to be clearer.

    This is a screenshot from Firefox developer tools when you choose Responsive design mode and click on the hand symbol on the top right “enable touch simulation”:

    https://snipboard.io/an9kRq.jpg

    It happens only in Arabic and only on the shop page.

    You see that only the basket appears, becauee the search and user account buttons are far on the left side. The website is much wider than the screen.

    Also, regardless of the settings chosen for scrolling the background image, it is still not visible at the bottom of the page.

    • This reply was modified 5 months, 3 weeks ago by atheerhuwa.
    • This reply was modified 5 months, 3 weeks ago by atheerhuwa.

    Were you able to get this resolved? This is what I see when loading up the shop in both my iPhone 7 on Safari and in Firefox on my desktop while in responsive design mode and enabling touch simulation

    https://i.snipboard.io/RUVtKi.jpg

    Hi, it works apparently on your iPhone.
    On Safari on my iPhone 6s the image background is completely missing and will only be found somewhere far at the left top if one keeps moving to that direction.
    On Samsung Internet nothing other than the background image can be seen.
    The screenshot is from Firefox. The issue is only visible on the shop page in Arabic.

    • This reply was modified 5 months, 3 weeks ago by atheerhuwa.
    • This reply was modified 5 months, 3 weeks ago by atheerhuwa.

    Hard to say, as I’m unable to replicate the issue I can’t determine the specific code that is the cause for a fix. Maybe somebody else will stop by that are able to see the issue and provide a fix.

    The issue may be resolved by using the following code in Storefront child theme functions.php file:

    <?php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 9999 );
    function my_theme_enqueue_styles() {
    	if ( is_rtl() ){
    		$parent_style = 'storefront-style';
    		wp_dequeue_style( 'storefront-child-style' );
    		wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style-rtl.css', array( $parent_style), get_the_time() );
    	}
    }

    Hi Condless,
    The PHP works, I finally found the issue today in the css. The overflow: visible for the page was causing the problem. I switched it in the mobile design to overflow: auto and the issue was solved.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.