Highlighted

divs overlapping in mobile view

New Here ,
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

841

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

divs overlapping in mobile view

New Here ,
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

842

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
Apr 19, 2019 0
Adobe Community Professional ,
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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Apr 19, 2019 1
Adobe Community Professional ,
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.


Ben

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
Reply
Loading...
Apr 19, 2019 1
New Here ,
Apr 23, 2019

Copy link to clipboard

Copied

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
Reply
Loading...
Apr 23, 2019 0