divs overlapping in mobile view

Report · Apr 19, 2019

Hello all, I've got a slight issue with two divs overlapping in mobile view on this site which is in it's initial stages Welcome to Merlin's Cafe - everything reduces down fine apart from the picture and form divs which when the layout shrinks down to fit a mobile screen the form goes over the top of the cafe image rather than sitting underneath of it as it should do. Hopefully someone can help out as to why this is, something obvious I'm guessing/hoping that my slightly tired mind can't spot! Thanks for any help in advance.

Report · Apr 19, 2019

You should be using HTML 5 code.

Use a CSS media query to remove floats and display: block in mobile viewports.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 19, 2019

As Nancy OShea has said, you should be using HTML5 code. Replace the first lines

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

with, which includes an extra meta tag to preserve the content from shrinking in smaller screens.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

The easiest way is to remove the image on smaller screens. This can be done by adding display: none to the style rules. The relevant rules can be found in phone.css as in:

If you still want o show the image in smaller screens, experiment with the style rules by removing position: absolute in the same style sheet.

Wappler, the only real Dreamweaver alternative.

Report · Apr 23, 2019

Thanks to both for the responses – my keyboard packed up on Friday night so it's taken till now to get a new one in hence a delay in replying and trying these out, much appreciated to both, think it's working correctly now!

Adobe Community

divs overlapping in mobile view