Working towards ensuring my website is responsive

Hello, I am a CSS beginner currently working as an intern. My task is to make a website's CSS compatible with Internet Explorer, and then make it responsive and scalable. Essentially, the design should retain its appearance when the window size changes - just adjusting accordingly. I have successfully adapted the CSS for IE, but the examples I find only seem to work in Chrome and Firefox, not IE.

Can anyone provide guidance on where to begin with this?

html, body {
background: none repeat scroll 0 0 #8FAE9F;
font-family: Trebuchet MS;
font-size: 27px;
font-weight: bold;
height: 99%;
margin: 0 auto;
padding: 0;
text-align: center;
}
.column.OBJ0, .column.OBJ1 {
max-width: 12.0em;
margin-right: -1.2em;
margin-left: -1.2em;
}
... (remaining code truncated for brevity)

Answer №1

What specific versions of Internet Explorer are you focusing on?

I'm also assuming that you're utilizing nested HTML tags, and using EM's is influenced by the parent's font size rather than the overall body font size. Have you considered trying REM's instead?

It might be helpful to educate yourself further on this topic: http://css-tricks.com/confused-rem-em/

Would you be able to share your HTML code as well?

Answer №2

There are two key aspects to address in your inquiry - ensuring compatibility with Internet Explorer and creating a responsive design.

Regarding responsiveness, simply scaling everything down by using percentages may not suffice for achieving true responsiveness. A truly responsive website adjusts layout elements using media queries, making content easily digestible for users on various devices. Additionally, optimizing hover events for touch screens enhances user accessibility.

To better assist you, it would be helpful if you could clarify your specific requirements. If your goal is solely fitting content, percentage-based styling might suffice, but for comprehensive responsiveness, consider integrating media queries into your design :)

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

Using AJAX in Classic ASP to submit a form via a POST request

My code in TEST.ASP looks like this: <HTML> <HEAD> <SCRIPT src="ajaxScript.js" type="text/javascript"></SCRIPT> </HEAD> <BODY> <FORM action="action_page.asp" method="post"> First Name:<BR> ...

Issue with running `npm start` in React after installing React script version 3.4.0

I'm new to React.js and I've been having trouble getting it to work after using npm start. No matter what I try, I can't seem to get it running. Any help would be appreciated. Error [email protected] start C:\xampp\htdocs& ...

Focusing on pinpointing certain mistakes within Drupal 7

When working with Drupal, encountering errors is a common issue. While some errors are simple to fix, others can be quite complex and require significant time and effort to resolve, even if the website appears to function normally despite the error. My qu ...

Shadow and Quality Issues with SVG Images

I have designed a unique SVG image with intricate details and a decorative frame, enhanced with shadowing effects. Unfortunately, after importing this SVG into a react-native application using the react-native-svg library, I noticed that the shadow around ...

Encountering an error while attempting to load the jQuery script: TypeError - $.fn.appear.run is not a

I have included an animation script for CSS in my markup, but I am encountering the following error: TypeError: $.fn.appear.run is not a function Does anyone know why this is happening and how I can resolve it? /* * CSS3 Animate it * Copyright (c) 2 ...

Saving the JavaScript console to a MySQL database: A step-by-step guide

I have purchased a JavaScript code online for running a spinwheel game. Now, I am looking to save the results from the spinwheel into a MySQL database. The JavaScript code already provides a result function, but I'm unsure how to save the result data ...

Leverage variables in Ajax to retrieve the data of an HTML element

Seeking assistance in converting multiple lines into a single for loop. var optie1 = ""; if($('#form #optie1_check').is(':checked')) { optie1 = $('#form #optie1_naam').val(); } var optie2 = ""; if($('#form #optie2_ch ...

How can you easily center content vertically on a web page?

There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answ ...

Error message: Angular JS encountered an issue when trying to initiate the test module. The cause

When I run JavaScript within an HTML file and use AngularJS with ng-repeat function, I encounter this console error: angular.js:38 Uncaught Error: [$injector:modulerr] Clicking on the link in the error message leads to: Failed to instantiate module test ...

Enhancing functionality by updating a function to accept an object as input instead of individual key:value pairs in TypeScript

I'm currently tackling a challenge with a friend's icon library component, specifically with their set() function. The issue arises when I want to invoke two functions, namely setRandomColor() and setColor(), both intended to update two values w ...

How can I arrange an ItemTemplate and Alternating ItemTemplate next to each other in a Gridview layout?

My webpage features a "Reports" page that will dynamically display buttons (formatted ASP:Hyperlinks) based on the number of active reports in a table. While everything works well, I am struggling with achieving the desired layout. I want my buttons to app ...

Checking if the Cursor is Currently Positioned on a Chart Element in Word Addin/OfficeJS

I am looking for a way to determine if the document cursor is currently positioned inside of a Chart element using the Microsoft Word API. My current application can successfully insert text, but when I attempt to insert text into the Chart title, it ends ...

Ways to usually connect forms in angular

I created a template form based on various guides, but they are not working as expected. I have defined two models: export class User { constructor(public userId?: UserId, public firstName?: String, public lastName?: String, ...

Discover the exclusive Error 404 dynamic routes available only in the production version of NEXT13! Don

Hey everyone, I'm encountering an issue with NEXT's dynamic routing (Next 13). My folder structure looks like this: - user/ -- [id]/ --- page.js It works fine in dev mode but not in production. What am I trying to do? I've created a "page ...

Using an external JavaScript script may encounter difficulties when loading pages with jQuery

Trying to utilize jQuery for loading html posts into the main html page and enabling external scripts to function on them. Utilizing a script (load.js) to load posts into the index.html page: $(document).ready(function () { $('#header').loa ...

Utilizing the synchronous approach to access the Facebook Messenger API

My current project involves creating a basic chatbot using the Facebook Messenger API. I am encountering an issue where the messages I send are not always displayed in the correct order. How can I utilize async/await functionality to ensure that the messag ...

Merge the JSON data with the Node.js/Express.js response

Whenever I input somedomain.com/some_api_url?_var1=1 in a browser, the response that I receive is {"1":"descriptive string"}. In this JSON response, the index 1 can vary from 1 to n, and the "descriptive string" summarizes what the index represents. I am ...

Retrieve Images from URL - Similar to Facebook Thumbnails

I am in the process of creating a website similar to "Reddit." Users will have the option to share URLs, and I would like to use PHP to extract the correct image from these links. What I'm looking for is a more advanced script that can retrieve imag ...

Overlaying Div Concealed by Background Video Filter

Whenever we add a filter to our background video, the div overlay ends up moving behind the video and becoming hidden. To see an example of this issue, check out this fiddle showcasing the background video with the text overlay: https://jsfiddle.net/dyrepk ...

Issue with AngularJS filter not functioning properly

I have a specific situation where I am using an ng-repeat directive in the following manner: {"ng-repeat" => "city in cities() | filter: search"} In this context, each city object is structured like so: { attributes: {name: 'Boston'} } Furt ...