Inspiring

Answered

Dreamweaver CC: How do you stop horizontal scrolling in safari/iPhone ?

4 replies
1690 views
Translate

overflow-x: hidden; works on all browsers except Safari/iPhone.

Any suggestions how to get round this ?

This topic is closed to new replies. Start a new post to keep the conversation going.

BenPleysierCorrect answer

Community Expert

For such a great design, it is a pity that you used an HTML table. Inevitably such a table will add extra spaces which are causing the horizontal scrolling.

To answer your question, just after the body tag (<body> add

<div id="overflowhidden">

and just before the end body tag (</body>) close the wrapper with

</div>

Getting back to the table matter, try adding the following style rule to your table elements

border-collapse: collapse;

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

P

Peter CarrAuthor

Inspiring

Thanks Ben.

The div tag worked.

border-collapse: collapse; on the table didn't seem to resolve this issue.

Translate

BenPleysier

Community Expert

You have not given us much information to go on. I assume that you have placed the overflow on the HTML or BODY elements. If you create a wrapper inside the body element, and apply the rule to the wrapper, I think that it should work.

Having said that, if you have applied all of the correct rules to your design, there should be no need for overflow: hidden.

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

P

Peter CarrAuthor

Inspiring

Yes the overflow is on the body with the css styling.

CONTENT

</body>

css

#overflowhidden {

overflow-x: hidden;

}

Can you give me an example of a wrapper inside ?

If you want to see it live.

Spinaxis Creative | Advertising Concepts, Design & Photography | Social Media Advertising, Google Adwords, Digital Marke…

Translate

BenPleysier

Correct answer

Community Expert

For such a great design, it is a pity that you used an HTML table. Inevitably such a table will add extra spaces which are causing the horizontal scrolling.

To answer your question, just after the body tag (<body> add

<div id="overflowhidden">

and just before the end body tag (</body>) close the wrapper with

</div>

Getting back to the table matter, try adding the following style rule to your table elements

border-collapse: collapse;

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.