Challenge with Responsive Design

I'm struggling with implementing a responsive design for the first time.

When I check the site on my iPhone, everything appears to be zoomed in for some reason.

My goal is to have the logo aligned to the left within the '.container' when viewed on a desktop, and centered when viewed on an iPhone.

Here is the URL for reference: .

In the HTML header, I have included the following:

 meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

Below is the relevant CSS code:

<div class="wrapper">
    <div class="container" id="header">
        <div id="peak-logo">
            <img src="img/peak-logo.png" alt="Peak Architects" />
        </div>
    </div>
</div><!-- end.Header !-->

The desktop CSS includes:

/* structure */

body {
font-family: "Calibri", Helvetica, Arial, Sans-Serif;
font-size:  16px;
color: #8d8c8c;
}

.wrapper {
float: left;
top: 0px;
left: 0px;
width: 100%;
background-color: #333; 
}

.container {
position: relative;
width: 1000px;
height: 100px;
background-color: #ccc;
margin: 0 auto;

}

For mobile devices, the CSS is as follows: @media screen and (max-width: 480px) {

body {

}
.wrapper {
    max-width: 480px;
}
.container {
    width: 100%;
    max-width: 480px;
}

#peak-logo {
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
    width: 200px;
    min-width: 480px;   
    margin: 20px 0;

}

}

While it works fine in the browser, there seems to be an issue when viewed on an actual phone device.

Answer №1

When the @media screen takes effect, this solution will work effectively. Check out the code here

There are a few issues with setting the minimum width in specific pixels, especially for mobile responsiveness. It's recommended to use a percentage (%) for better adaptability to different viewports. Keep an eye on margins and padding when setting elements to 100% width to avoid zooming issues and misplacement of elements. Adjusting widths slightly lower than 100% can help identify problematic elements.

In the provided jsfiddle example, adjustments were made to widths and margins. Hopefully, these changes will guide you in the right direction!

#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;
min-width: 100%; 
}

.wrapper {
width: 100%;
}
.container {
width: 100%;
}
.container img {
width: 100%
}

Ensure that your images are responsive by setting their widths in percentage as well. You can set max-width or max-height in CSS for image constraints, keeping viewport sizes in mind.

Hope this explanation helps!

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

Tips for modifying hover effects using jQuerystylesheet changes

I attempted running the following code snippet var buttonElement = $('<button>Button</button>'); $('body').append(buttonElement); buttonElement.hover().css('background-color', 'red'); Unfortunately, the ...

Incorporating a Unique Identifier to a Marker in GMaps.js

Instead of using the default Google Maps, I decided to use a package called GMaps.js, which is designed to simplify the process. I am currently trying to figure out how to assign an ID to a Marker in GMap.js. Here is what I have so far: map.addMarker ...

How to export HTML table information to Excel using JQuery and display a Save As dialog box

This script has been an absolute lifesaver for my web application. Huge thanks to sampopes for providing the solution on this specific thread. function exportToExcel() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6& ...

Overlay with a progress bar that obscures visibility

I'm dealing with a progress bar that needs to be displayed on top of an overlay. If you take a look at this jsfiddle, you can see the issue. Here's the markup: <div class="overlay mouse-events-off"> <div class="progress progress-st ...

What is the best way to position two grid containers side by side?

I am new to using Material UI and Grid, and I'm encountering an issue with positioning two grid containers side by side. My goal is to have an image on the left within a Grid container, and a list of objects on the right. While I was successful in po ...

Hide the Modal Content using JavaScript initially, and only reveal it once the Onclick Button is activated. Upon clicking the button, the Modal should then be displayed to

While trying to complete this assignment, I initially attempted to search for JavaScript code that would work. Unfortunately, my first submission resulted in messing up the bootstrap code provided by the professors. They specifically requested us to use Ja ...

pressing a button unrelated to the 'close' button still triggers the close event

I have a notification bar that features a button in the center that links to another website. There is also a 'close' button on the far right. However, whenever I click the center button, it also triggers the close button. I tried moving the #cl ...

Transferring a variable through a Navigation Bar selection

Currently, I have a PHP/HTML select box that is generated dynamically based on database variables. I utilize $_POST to identify the selection and handle it as needed. My goal is to transition this functionality into a dropdown menu within a navigation bar ...

Update the image and heading simultaneously when hovering over the parent div

I am looking to enhance the user experience on my website by changing the color of headings and images when a user hovers over a specific section. Currently, I have been able to achieve this effect individually for each element but not simultaneously. Any ...

Encountering a "Index of /" error when working on a basic HTML project with Tailwind

I am having trouble understanding how to properly set up and manage version control for my projects. I initially created a project using Tailwind CSS that worked fine on my local machine with an http-server plugin. However, when I tried to create a GitLab ...

What is the formula to determine the sizes of grandchildren div containers?

Hey everyone, I'm having some trouble with my jQuery code and I can't seem to figure out what's going on. Here's the scenario: I'm creating a few divs (based on entries from MySQL) and I'd like to show you the end result: ...

Does the color of <hr> tags in Bootstrap 5 look different?

Encountering a problem with Bootstrap 5 version where adding background-color to <hr> is not displaying accurately: Comparison using Bootstrap 4: https://i.sstatic.net/QIY0P.png Comparison using Bootstrap 5: https://i.sstatic.net/Drlow.png Despite ...

Issues with IE6 hover state not properly resetting

Tutorial This particular issue has been isolated in the test case provided above. It is easily noticeable when viewed in IE6. Description of the Issue In Internet Explorer 6, when hovering over the link, all child elements that are supposed to be visibl ...

Using a form tag within a table in HTML5

Can someone help me figure out how to integrate a form with the "Get" method into a table? The table includes a text field, and upon submitting the form, it should initiate validation. The validation process currently works correctly, however, when submi ...

Button style not being affected by CSS

I'm having trouble changing the background color of a button in CSS. The CSS link is working perfectly fine, and the button changes color when I attempt to apply Bootstrap or use DOM to change it, but not when I use pure CSS. Here's the code sni ...

What is the best way to update the image card in bootstrap?

Could someone please assist me in changing the image displayed? I keep getting the same copied image, but I would like id 1 to have a different image. This is crucial as I plan to present this for my defense in class. Thank you. let htmlString = ` <di ...

css The max-width property appears to be malfunctioning

My parent element has a width of 100px and a position of relative. Inside it, there is an inner element with a position of absolute. I want this inner element to stretch out up to 200px, but for some reason, it's not working. The maximum value it take ...

Access and expand a bootstrap accordion with a hyperlink

Here is a concept I want to make happen: For my project, I am utilizing Bootstrap v3.4.1 and have set up two columns next to each other. My goal is to link the elements in the hotspot banner (left column) to trigger and open the corresponding Accordions ( ...

Tips for adjusting the value of a textbox up and down

I am facing an issue with my booking flight form that is supposed to take input from users regarding the number of travelers. I have three textboxes for Adult, Children, and Infants respectively, along with a main textbox to display the final result. Howev ...

The ajax method for loading an xml file results in displaying the undefined message

When attempting to fetch content from an xml file using ajax, the page initially displays "undefined". However, upon refreshing the page, the content loads successfully. Take a look at my code snippet below: $.ajax({ type: "GET", url: "xm ...