I am in the process of designing a contact page for my website and facing challenges with its responsive design across different screen resolutions.
My laptop has a resolution of 1368x766 while my monitor is set at 1920x1080.
The absolute positioning of elements seems to be causing issues as some are moving around while some remain fixed. I am feeling quite perplexed by this:
CSS:
...
HTML:
<...>
</body>
For those looking for a straightforward example, I have created a jsfiddle: Check out the JSFiddle here
HTML
<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hello there! I'm Benjamin, a Web Designer and IT Project Manager based in Worthing.</br></p>
<ul>
<li><h1>Find me on LinkedIN:</h1>
<a href="https://www.linkedin.com/in/benjaminedwards86">
<img src="http://i.imgur.com/KEqGBV3.png">
</a>
</li>
<li><h1>Download my CV:</h1>
<a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
<img src="http://i.imgur.com/ce0Zzgi.png">
</a>
</li>
<li><h1>Send me an email:</h1>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1d6ddrqrssrsr"><email protected></a>">
<img src="http://i.imgur.com/KQV7Eip.png">
</a>
</li>
</ul>
CSS
body {
text-align: center;
background: url("http://i.imgur.com/JN0YSkP.png");
background-repeat: repeat;
background-position: center;
color: white;
font-family: 'Roboto', sans-serif;
min-width: 900px;
}
img {
margin: auto 20px;
}
ul {
height: 275px;
width: 80%;
margin: 10% auto;
border: 3px solid #31C2A9;
min-width: 900px;
}
ul li {
float: left;
width: 33%;
border-right: 1px solid #31C2A9;
list-style-type: none;
height: 275px;
min-width: 275px;
}
ul li:last-child {
border-right: none;
}
You can simplify your code by removing unnecessary css selectors. No need for any position absolute :-)
When facing a problem, it's always a good idea to experiment with different solutions. For instance, if you're encountering issues with elements moving around on your webpage, it might be because you've set all the element positions and values in a rigid manner. For example:
p {
position: absolute;
top: 225px;
right: 410px;
font-size: 32px;
}
This approach may cause elements to behave unexpectedly when viewed on different browser sizes, as their positions are fixed for only one specific dimension.
To address this issue, consider understanding the difference between absolute and relative positioning for elements. Here's a general guideline: Use absolute positioning for an element that needs to be positioned in relation to another div, and ensure its parent is set to position:relative.
To make your website responsive, you can utilize frameworks like Bootstrap or use percentage-based measurements to avoid distortions.
For instance, instead of hard-coding values, try using:
p3 {
position: absolute;
top: 20%;
right: 30%;
font-size: 1.1em;
}
If you're unsure about how these adjustments work, take some time to learn about percentage and em measurements. And if you need assistance, feel free to create a sample code snippet that we can review and help you resolve any problems.
To customize your website's appearance for different devices, consider using CSS media queries.
CSS Media Queries is a module in CSS3 that allows you to adjust the layout of your content based on various factors like screen resolution (e.g., smartphone vs. computer).
Instead of just targeting specific devices, media queries enable you to cater to different capabilities of devices. This includes considerations such as:
The height and width of the device or browser
The screen resolution and orientation (portrait or landscape) for mobile phones and tablets
In CSS2, you could specify stylesheets for different media types like screen or print. CSS3 takes this further by introducing media queries, allowing you to apply styles based on conditions.
You can create tailored stylesheets for various resolutions and devices without altering the actual content, making it a powerful tool for responsive design.
For example:
If you want a certain style applied when the viewing area is smaller than 600px, you can use the following CSS:
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
To link a separate stylesheet based on a media query, include this line of code within the <head> tag:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Using Multiple Media Queries:
You can combine multiple media queries to apply styles under different conditions. For instance, the following code applies when the viewing area ranges between 600px and 900px:
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Considering Device Width:
If you wish to target devices with a maximum width of 480px (like an iPhone display), you can utilize the max-device-width property. Keep in mind that max-device-width refers to the actual device resolution, while max-width relates to the viewing area resolution.
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
I'm having trouble including the page title in the footer of all printed pages. I've tried using the following code snippet: @page { @bottom-right { content: attr(title); } } However, this method doesn't seem to be working for me. ...
I need help with filling text in a Selenium Firefox browser. I am struggling to find the selector for entering text and it seems very complex for me. Please explain the only way I can achieve this using only CSS selectors. <div class="Gb WK"> < ...
Unable to find a solution in the jQuery documentation, I am seeking help here for my specific issue. Embracing the DRY principle, I aim to utilize JavaScript to include a character countdown helper to any textarea element with maxlength and aria-described ...
I've been experimenting with CSS3 transitions on a website I'm designing, but I've encountered a small problem. Whenever I hover over an element with a CSS3 transition, the text in the previous section blurs momentarily and then returns to ...
My elements are all behaving correctly with the slidetoggle() function, except for my li:before class. I've attempted to manipulate the overflow, visibility, display, and other properties of both the :before pseudo-element and the li element, but the ...
I'm attempting to update the status of the current page when it loads... const navigation = \[ { name: "Dashboard", href: "/dashboard", current: false }, { name: "Team", href: "/dashboard/team", current: fa ...
Trying to change the border color based on the opening hours. For example, green border from 10am to 9:29pm, yellow from 9:30pm to 9:44pm, and orange from 9:45pm until closing at 10pm. The issue is that the colors change at incorrect times beyond midnight. ...
i need assistance creating a box for text that looks like this https://i.stack.imgur.com/JOC0r.png my CSS code for the box is as follows: .bg-text-kol2 { background-color: #ffffff; background-size: 10px 10px; border-top-left-radius: 10px; border ...
On my xhtml page, I've implemented p:selectOneRadio. However, I'm struggling to remove the default style class .ui-helper-hidden-accessible, resulting in the radio button icons not being visible. Here's a snippet of my code: <p:selectOne ...
I am seeking a way to format paragraphs with large quotation marks surrounding them. I have attempted several methods, but my line-height seems to be affected, as shown in the following image: Can anyone suggest a proper method for achieving this? (Addit ...
Upon deploying the application on App Engine, the Chrome client initially encounters the following error. "Refused to apply style from 'https://tournypoker.wl.r.appspot.com/styles/styles.css' because its MIME type ('text/html') is ...
Need some assistance with grouped buttons. Let's consider a scenario where there are 5 buttons on an HTML page. When the 3rd button is clicked, buttons from 0 to 3 should change color and the function should return 3. Similarly, when the 5th button is ...
Currently, I am developing a small tile matching game where the variable "bestTime" saves the time taken to complete each session. The value of "bestTime" is then displayed as text using the variable "bestTimeTxt." Once a session is completed, a link will ...
I'm currently facing a challenge with a specific issue. I want to implement a toggle menu for mobile devices on a website that I'm developing. It's functioning smoothly, and you can see it in action on this CodePen. The JavaScript code for ...
I am working on a project that involves a selection menu in the form of a drop-down list. <select> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> Also, I ...
Recently, I encountered a peculiar problem. Upon loading a page, the text displayed with full opacity. However, upon the Google Maps API loading after 2 seconds, the entire page's styling suddenly changed. It was as if the text on the page became less ...
I initially tried to make the opening paragraph stand out by applying a red color, but unexpectedly, all elements on the page turned red. view image here <!DOCTYPE html> <html lang="en"> <head> <link rel="styleshee ...
Currently, I am practicing my PHP skills with if and else statements as well as form validation. The main concept I am working on involves the following: Upon entering a name, Date of Birth (DOB), and email, and then clicking the submit button, the action ...
Just a moment ago, something strange happened while I was working on my memory game. After reopening the page, the borders around the divs stopped showing up when navigating with the keyboard arrows. (Click in the window to activate the arrow keys.) Normal ...
Is it possible to control the z-index of the cursor using CSS or Javascript? It seems unlikely, but it would be interesting if it were possible. Imagine having buttons on a webpage and wanting to overlay a semi-transparent image on top of them for a cool ...