How To Fix Content Wider Than Screen Error

Aug 15, 2023

How To Fix Content Wider Than Screen Error

Unresolved mobile usability issues can have a huge impact on your website’s traffic 📉 Tune in to find the solution and keep your traffic on track ▶️
👉 Subscribe: https://www.youtube.com/c/Kinsta?sub_…

Unresolved mobile usability issues can have a significant impact on your website’s traffic. A common problem Google Search Console may warn you about is the “Clickable elements too close together” error, which likely means that your site is complex for mobile users to navigate.

More than 4.32 billion people access the internet from their mobile devices. Hence, it’s crucial to resolve this clickable elements error as soon as possible. Thankfully, there are multiple ways you can do so and make your website more mobile-friendly.

In this video, we’ll explain what the “Clickable elements too close together” issue is, discuss why it happens, and walk you through three methods you can use to fix it.

ℹ️ About Kinsta

Kinsta is an award-winning Cloud Platform designed to host and manage your WordPress sites, Applications, and Databases faster and more efficiently. Trusted by 25,000+ companies worldwide, from developers, startups, and agencies, to multinational brands, we guarantee lighting-fast performance, enterprise-level security, ease of use, and exceptional support.

🚀 Try our flagship Managed WordPress Hosting plans and get $240/month worth of premium features included in every plan. That’s free unlimited migrations, 20% faster load times thanks to Google’s fastest servers and Premium Tier network backed by Cloudflare’s 275+ CDN locations worldwide, and 24/7/365 multilingual technical support from humans in less than 2 minutes.

👉 Try risk-free with our 30-day money-back guarantee Powerful Managed WordPress Hosting

👤Follow us:
► https://kinsta.com/blog/
► https://kinsta.com/newsletter/
► https://twitter.com/kinsta
► https://instagram.com/kinstahosting
► https://facebook.com/kinstahosting

💡Discover all of our hosting solutions ► https://kinsta.com/

🕘Timestamps

0:00 Intro
0:47 Why the “Content Wider Than Screen” Error May Appear
1:20 Avoid Using Absolute Variables in CSS Declarations
1:53 Assign Images a Maximum Width
2:29 Use Meta Viewport Tags
3:06 Use Modern CSS Layout Techniques
3:22 Use CSS Media Queries Where Appropriate
3:53 How to Verify and Validate Your Error Resolution

📚Resources

🛠How to Fix the “Clickable Elements Too Close Together” Error (Written Guide)
► https://kinsta.com/blog/clickable-ele…

#ContentWiderThanScreen #MobileUsabilityIssues

Content

0.17 -> Hi, I'm Alisha, and today we're going to learn

3.16 -> how to fix the "content wider than screen" error.

6.256 -> (upbeat music)

11.95 -> Google Search Console may warn you

13.95 -> about various mobile usability errors.

16.9 -> Your summary report could also include

19.17 -> the "content wider than screen" issue.

21.72 -> This issue will appear in the same place

24.04 -> in your Google Search Console

25.62 -> as the clickable elements error.

27.56 -> Similarly, it has a variety of potential causes,

31.14 -> but before we get too far, I want to let you know

33.66 -> that there will be links to more resources

35.81 -> in the video's description, and remember,

38.3 -> subscribe and ring that bell to get notifications

41.24 -> for future helpful content.

43.53 -> Now let's get to work.

48.49 -> This error occurs when your site design

51.23 -> expands horizontally, forcing mobile users

54.33 -> to swipe sideways to view the offscreen content.

58.16 -> To provide a good user experience,

60.35 -> you should avoid horizontal scrolling wherever possible.

63.53 -> You're more likely to encounter

65.1 -> the "content wider than screen" issue

67.07 -> if you use absolute values in your CSS declarations.

73.75 -> If your report includes

75.16 -> the "content wider than screen" error,

77.57 -> you can use these simple methods to resolve it.

80.26 -> One of the best ways to fix

81.97 -> the "content wider than screen" error is to avoid

84.81 -> using absolute variables in your CSS declarations.

88.62 -> Your content shouldn't require a specific viewport

91.64 -> to display and function correctly.

93.87 -> Therefore, instead of using absolute values,

96.79 -> you should opt for relative width

98.84 -> and position values for your CSS elements.

102.28 -> Using relative values wherever possible,

104.8 -> you can create flexible layouts

106.53 -> that scale to suit a range of screen sizes.

109.54 -> An image with fixed dimensions can appear

112.29 -> larger than the viewport and in turn,

114.93 -> trigger the "content wider than screen" error.

118.18 -> To ensure that your images scale best

120.41 -> on the screen's dimensions, it's best to assign

123.22 -> all images a max width of a hundred percent.

126.3 -> It will force the image to shrink

127.96 -> to fit the available space.

130.11 -> Even if you use max width, you should still use

132.78 -> the width and height attributes in your image tag,

135.68 -> as modern web browsers use this information

138.01 -> to reserve space for images as they load.

140.37 -> Using the image tag, you can avoid layout shifts

143 -> when your image finally appears on screen.

145.35 -> By default, mobile browsers render the page

148.1 -> at desktop screen width, which is usually around 980 pixels.

152.89 -> The browser will then try to optimize your page

155.47 -> by increasing the font size and scaling your content

158.22 -> to fit the current screen dimensions.

160.75 -> Unfortunately, this default behavior

162.93 -> can result in inconsistencies.

165.16 -> Some users may need to zoom in to read

167.41 -> and interact with your content,

168.96 -> which is why you may be seeing this error.

171.58 -> Instead of relying on this default behavior,

174.42 -> you should give the browser instructions

176.66 -> on how to control the page's dimensions and scale.

179.58 -> You can do this by inserting a meta viewport tag

182.29 -> into the head of your document.

184.67 -> You can also fix the "content wider than screen" error

187.94 -> by switching up your site's layout.

190.3 -> To help you create more flexible layouts,

192.61 -> you may want to consider implementing techniques

195.01 -> like Flexbox, CSS grid layout, or multiple column layout.

200.15 -> Media queries can make it easier to change styles

203.3 -> based on the user device, including touchscreens.

207.28 -> Therefore, if you're still dealing

208.76 -> with the "content wider than screen" error at this point,

211.6 -> we recommend using CSS media queries where appropriate.

216.01 -> After making these changes, it'll be time to test

218.71 -> to see whether you successfully resolved

220.96 -> the "content wider than screen" error.

223.67 -> You can do this by rerunning the mobile usability report

226.94 -> and validating the fix using the steps we discuss

229.88 -> in the next section.

234.02 -> It's essential to determine whether your changes

236.48 -> have resolved the "content wider than screen" error.

239.35 -> You can do this by rerunning Google's mobile usability test.

243.25 -> To do so, navigate back to your mobile usability report

246.81 -> and locate the "content wider than screen" error.

250.17 -> Next select the validate fix option.

253.43 -> Google will then crawl your website and you'll receive

256.45 -> a message letting you know that it's in the process

259.04 -> of validating the change.

260.42 -> If you've resolved the error,

262.01 -> then Google Search Console will display a passed message

265.64 -> and an accompanying green check mark.

268.71 -> On the other hand, if the fixes you employed

271.1 -> are not validated, you'll have to revisit the error

274.11 -> to implement an alternative solution.

277.97 -> Kinsta's WordPress hosting can speed up your website

280.65 -> by up to 200% and you'll get 24/7 support

285.12 -> from our expert WordPress engineers.

287.69 -> Let us show you the Kinsta difference.

290.27 -> Try a free demo of our MyKinsta dashboard

292.67 -> at demo.kinsta.com.

295.34 -> Thanks for watching, and don't forget to subscribe

297.9 -> for more tutorials, explainers,

299.83 -> and helpful content like this.

301.823 -> (upbeat music)

Source: https://www.youtube.com/watch?v=ANyD1sJeJZg