Optimizing Safari for the Best Screen Size Experience

I seem to be encountering issues with optimizing my website. Everything appears to be working correctly in terms of widths, heights, margins, etc., on my laptop. However, when I view the site on an iMac or any other computer with a larger screen size, the content does not cover the full screen but seems to be offset to the laptop screen size.

Below is the CSS code:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, input, textarea, fieldset, blockquote 
{
    margin: 0; padding: 0; border: 0;
}

body
{
    width:100%;
    height:100%;
    padding-left:30px;
    background-color:white;
}

#connectedbody
{
    width:900px;
}

.headertwitter
{
    margin-left:40px;
    margin-top:-58px;
}

.headervimeo
{
    margin-left:80px;
    margin-top:-59px;
}

.headertypecontact
{
    margin-top:-16px;
    margin-left:290px;
}

#header
{
}

.headerwork
{
    margin-left:147px;
    margin-top:-51px;
}

.headercontact
{
    margin-left:302px;
    margin-top:-51px;
}

.logo
{
    position:fixed;
    z-index:20;
    margin-top:30px;
}

.floater
{
    position:fixed;
    z-index:10;
    color:#ffffff;
    background-color:;
    width:3000px;
    height:270px;
    margin-left:-100px;
}
...

Below is the HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...

When viewed on an iMac, the content does not cover the full screen as intended. It appears correctly on a laptop. The issue may be related to the CSS styling not adjusting properly to different screen sizes.

css

Answer №1

Reformat your code like this:

body
{
    width:100%;
    height:100%;
    padding-left:30px;
    background-color:white;
}

Ensuring it will always be 100%.

Also, remember to include "px" after the height value in your body for accuracy.

UPDATE

Based on your updated HTML, it seems there is a lack of structure. Consider placing a div below your <body> tag and above your </body> tag. Center it with a max width, like 900px, to keep everything aligned within that space and centered on the screen.

Hope this solution helps?

UPDATE2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Phantom Productions</title>
<link rel="stylesheet" type="text/css" href="phantomproductions.css"/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {

    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});
</script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

</script>
</head>
<body>

**INSERT BEGINNING DIV HERE**

<div id="header">
    <img class="floater" src="header.png" alt="header"/>
</div>

<a href="#header" class="scroll"/>
        <img class="logo" src="logo.jpg" alt="logo"/>
</a>

<div id="headericons">
    <ul>
        <li>    
            <a href="#bug" class="scroll"/>
                <img src="about_header.jpg" alt="about"/>
            </a>
        </li>
        <li class="headerwork"> 
            <a href="#workstophere" class="scroll"/>    
                <img src="work_header.jpg" alt="work"/>
            </a>
        </li>
        <li class="headercontact">
            <a href="#footer" class="scroll"/>
                <img src="contact_header.jpg" alt="contact"/>
            </a>
        </li>
    </ul>
</div>

<div id="headertext">
    <ul>
        <li>
            <a href="#bug" class="scroll"/>
                ABOUT
            </a>
            <a href="#workstophere" class="scroll"/>
                WORK
            </a>
        </li>
        <li class="headertypecontact">  
            <a href="#footer" class="scroll"/>
                CONTACT
            </a>
        </li>
    </ul>
</div>

<div id="banners">
    <ul>
        <li>    
            <a href="http://facebook.com/"/>    
                <img src="headericons_03.png" alt="logo"/>
            </a>
        </li>
        <li class="headertwitter">  
            <a href="http://twitter.com/"/>
                <img src="headericons_05.png" alt="logo"/>
            </a>
        </li>
        <li class="headervimeo">
            <a href="http://vimeo.com/"/>
                <img src="headericons_07.png" alt="logo"/>
            </a>
        </li>
    </ul>

......(code continues)......

**END DIV HERE**

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Maintained grid column stability amidst various modifications

I have a complex 2-column grid layout, and the example shown here is just one part of it. The complete code follows a similar structure. I am looking for a way to ensure that the green box always stays close to the red box in the layout, without having a ...

csscss-grid

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...

javascriptcssreactjs

Utilize JavaScript to create a toggle menu feature that can target multiple variables with just one click function

I am attempting to create a collapsing menu on click functionality with additional modifications. One of the changes I would like to implement is altering the background of another element when the menu collapses. Currently, the code snippet only works fo ...

javascripthtmlcss

Combining two CSS classes to create an "alias"

Currently, I’m utilizing bootstrap for table styling. For instance: <table class="table table-striped main"> However, the table I want to style is dynamically generated by a separate tool that I have no control over, and it already has its own ta ...

htmlcss

Issues with Flexbox not being rendered correctly on Safari 5.1 for Windows

My goal is to design a straightforward box for questions, with the question number on one side and the text on the other. To ensure that the texts are aligned vertically and dynamic, I am experimenting with using flexbox. I have researched both the old an ...

htmlcssflexbox

The surprising margins that Bootstrap sneaks into columns

It seems like bootstrap is mysteriously including an unseen margin in my column classes. Even after inspecting an element labeled as 'col-lg-3,' there is no visible margin CSS, and attempting to manually add margin:0 still results in a margin bei ...

twitter-bootstrapcssmarginbootstrap-4

Optimize your Kendo components in Angular with this top-notch customization strategy

How can kendo components like grids and charts be styled in the best possible way while following recommended practices? My current methods of styling them are: 1 : Utilizing ng deep, host, however these approaches have been deprecated and are not consi ...

cssangularuser-interfacesasskendo-ui

The issue with CSS filter invert not functioning properly in Mozilla Firefox is causing complications

I am currently developing a small Firefox add-on designed to make reading pages at night more comfortable. The goal is to invert page colors without affecting images. Here is the code snippet I am using: document.body.style.filter = "invert(100%)"; var i ...

javascriptcssfirefox

Utilize CSS in the same way as the legend tag styling

I'm looking to create a stylish border around my HTML component. While I know the HTML legend element can achieve this, I want to use it outside of a form. For reference on using HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml ...

htmlcsslegend

issue with arranging content in a two-column layout with headers

Currently working on my first website and running into some CSS issues. I'm aiming for a two-column + header layout that fills the entire screen space of the website. I have the following specifications in mind: Header takes up 20% of the screen he ...

htmlcss

CSS- Strategically placing and centering images above specific keywords in (any) HTML content without disrupting the flow of text

My main objective involves dynamically inserting images above text on any given page using a content script. The challenge lies in maintaining the proper alignment of the text after adding the images. To achieve this, I surround the words where the image i ...

javascripthtmlcss

Styling Rules for WebKit Browsers

Is there a method to apply a particular CSS style for a div based on whether the user is accessing the page from a Chrome browser on a Desktop or an Android device? .myDIV{ [if CHROME???] width: 280px; [if ANDROID???] width: 100%; } Seeking guidance on ...

androidcssgoogle-chrome

Cover the entire section with an image

I'm aiming to achieve a similar layout like this (using tailwind) : https://i.stack.imgur.com/G0oti.png Here's the current setup: <section class="bg-juli-white pt-24"> <div class="max-w-6xl mx-auto flex flex-col" ...

csstailwind-css

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

*edited format I came across a PHP code for a calendar on the internet and I am currently working on implementing an onclick event that captures the date selected by a user as a variable (which will be used later in a database query). At this point, my g ...

phpjquerycssarrays

Please assist in changing the text color of the right side of my navigation bar to white with the help of Bootstrap

Is there a way to change the text color of my nav-bar to white, while keeping the background as 'primary-subtle' with Bootstrap? How can I override Bootstrap's default functions using CSS when combining these two styles? Here is the code sn ...

htmlcsstwitter-bootstrapbootstrap-modalbootstrap-5

The <link> element in the HTML file referring to the stylesheet {% static 'css/style.css' %} is not functioning properly

I am having trouble aligning text to the center in VS Code when linking CSS to HTML. The 'center-aliend' property doesn't seem to work for me. Can someone point out what I might be doing wrong? I am trying to position the text 'Hello St ...

htmlcssdjango

Personalizing the form controls in Bootstrap for selection options

Utilizing Bootstrap's form-control class helps maintain a consistent style for both form input and select option elements. However, when using form-control on select elements, it results in an unsightly drop-down button appearance in Firefox.https://i ...

cssbootstrap-4html-inputform-control

Trouble keeping HTML/Javascript/CSS Collapsible Menu closed after refreshing the page

My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...

javascripthtmlcssmenu

The hierarchy of CSS in Vue components

I've developed a customized CSS framework to streamline the design process across all my internal projects. The central file is structured as shown below: @import "~normalize.css/normalize.css"; @import "_variables.scss"; @import "_mixins.scss" ...

htmlcssvue.js

Is there a way to control the visibility of two divs depending on which one a user hovers on?

Having two stacked div elements containing images, I want the div with id = "features3_HDS_image" to become visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be displayed when hovering over the div ...

jqueryhtmlcss