Skip to main content
H
hourtayter
Known Participant
April 19, 2019
Question

divs overlapping in mobile view

  • April 19, 2019
  • 2 replies
  • 2077 views

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.

This topic has been closed for replies.

2 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
April 20, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
H
hourtayterAuthor
Known Participant
April 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!

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 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
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices