Problem on touch screen devices with the background width and image

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 4 years, 10 months ago by atheerhuwa.
• This reply was modified 4 years, 10 months 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 4 years, 10 months ago by atheerhuwa.
• This reply was modified 4 years, 10 months 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.