16
Replies
I can't reproduce it either.
- Is your code valid and error-free (denoted by a green ✔ checkmark in a circle)? See screenshot.
- Are you in LIVE or DESIGN view? Try toggling to LIVE with Ctrl/Cmd + Shift + F11.
- Does the image reside in your local site folder on your computer's primary hard drive?
- Or is the image on a remotely hosted server?
What happens when you REFRESH Live view with F5?
Preview window doesn't accommodate the whole page...
By @Avatar55977840
=============
Reponsive Layout issues are 100% about code -- HTML and CSS.
Please upload the problem page to your remote server and post the URL here for us to examine in full context.
Without a URL, we're just making guesses about what could be going on.
Preview doesn't accommodate, I meant the whole html-page doesn't fit inside the Preview pane without scrolling.
By @Avatar55977840
That points to the fact that your page is not responsive. In other words, you have not catered for smaller screen sizes.
As an example, this is the image for desktops
And this is mobile view
Preview doesn't accommodate, I meant the whole html-page doesn't fit inside the Preview pane without scrolling.
By @Avatar55977840
That points to the fact that your page is not responsive. In other words, you have not catered for smaller screen sizes.
As an example, this is the image for desktops
And this is mobile view
By @BenPleysier
Just as an aside note: Your 'Menu' text and 'burger' icon is not visible on page load - android tablet (Chrome browser) on the home page. One needs to swipe to the right to make it come into view, then when you click on the burger icon the dropdown menu link text is black, not gold, so against the black background the links appear invisible. The text links are there and the links work fine, you just can't see they are there.
On all your other pages the burger icon is visible on page load and dropdown menu text/links are gold...........so you may want to investigate what's different about the set up on the homepage.
Live view can only show what will fit in the screen size you've designated.
But that said, it's not how it looks in Dreamweaver that counts. What matters is how your page performs in actual web devices (mobile, tablet & desktop). What's the URL to your web page?
I'm moving the old HTML content to a publishing platform that can accommodate multiple devices.
By @Avatar55977840
==========
Not sure why we're discussing Dreamweaver if you're moving to another platform. 🤔
Copy & paste this code into a new blank page. This layout is responsive and should fit inside whichever sized panel you have.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 85%;
margin: 0 auto;
background-color:antiquewhite;
color:#372602;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
font-size: calc(16px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
/**linked text**/
a:link {color:darkred; text-decoration:none}
a:visited {color:darkgray;}
a:hover, a:active, a:focus {color:crimson; text-decoration: underline}
.grid-container {
display: grid;
grid-column-start: col 1;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, 1fr);
}
.grid-container img {
vertical-align: baseline;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<main>
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum consequuntur numquam eaque deserunt repudiandae optio dolores soluta voluptate quaerat, incidunt assumenda aperiam vitae unde reprehenderit, voluptas minima ducimus tempore, et.</p>
</div>
</main>
<h2>CSS Grid Test</h2>
<div class="grid-container">
<ul>
<li><a href="#">Linked Text</a></li>
<li><a href="#">Linked Text</a></li>
<li><a href="#">Linked Text</a></li>
</ul>
<img src="https://dummyimage.com/650x490" alt="placeholder">
<img src="https://dummyimage.com/650x490" alt="placeholder">
<img src="https://dummyimage.com/650x490" alt="placeholder">
<img src="https://dummyimage.com/650x490" alt="placeholder">
<img src="https://dummyimage.com/650x490" alt="placeholder">
<img src="https://dummyimage.com/650x490" alt="placeholder">
<img src="https://dummyimage.com/650x490" alt="placeholder">
<img src="https://dummyimage.com/650x490" alt="placeholder">
<img src="https://dummyimage.com/650x490" alt="placeholder">
</div>
</body>
</html>
Post back if you have any questions.
AdChoices