divs overlapping in mobile view

Community Beginner ,
Apr 19, 2019 Apr 19, 2019

Copy link to clipboard

Copied

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.

Views

1.3K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 19, 2019 Apr 19, 2019

Copy link to clipboard

Copied

You should be using HTML 5 code.

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

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 19, 2019 Apr 19, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 23, 2019 Apr 23, 2019

Copy link to clipboard

Copied

LATEST

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines