Responsive web pages

hello everyone , how do you make a web page not to scroll horizontally on small devices ??, i have used media queries but that’s a problem i encountered

here is the link to my product landing page, so i realized the problem when i resized the browser even after using media querries , am still working to improve on the project though ,

1 Like

Hey there! :slight_smile: Could you explain exactly what kind of problem you’ve encountered so that we could give you a more detailed answer? If you could give us a code to the project that you’re struggling with, that would be even better :smiley:

In general, I guess a very common problem to run into is using absolute measurements and then not overriding them properly in the media query. Or forgetting to account for margins and padding. But again, this is just generally speaking, and it’s probably not that helpful. If you want more specific tips, I suggest providing your code here or (even better) a link to your project, and explaining what the issue is, what you have tried and what you want to happen on the page. :slight_smile:

sorry about that , just edited the post

OK, awesome, thanks! :slight_smile: So, the problem is with the iframe element. In HTML, you have fixed the absolute width and height (width="640" height="360"). I would advise against this. Instead, you can set the width property to a relative unit, like percentages, in the CSS and it will automatically scale with your page. Then, you can get more control over how it behaves by setting max-width for example or changing the width in media queries to better fit different devices. Play around with it and see what looks best :slight_smile:

Hope this helps and good luck! :smiley:

heyy Thanks , i was able to fix the problem, sure the thing iframe caused the glitch:grinning:

1 Like