When the window is resized, the text and images become jumbled and distorted

As a beginner in CSS, I am encountering an issue where the text and images on my website get distorted when I resize the window. How can I resolve this?

HTML

<img src="images\titles_03.jpg" class="tt1" > 
<img src="images\titles_05.jpg" class="tt2" > 
<img src="images\titles_07.jpg" class="tt3" >

CSS 

 .tt1 { 
  position:absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 759px;
  top: 200px;
  }


 .tt2 { 
  position:absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 200px;
  }

 .tt3 { 
  position:absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: -759px;
  top: 200px;
  }

This excerpt is part of the code causing the issue.

htmlcss

Answer №1

It seems that the dimensions of your images are fixed in pixels. Have you considered using a percentage value to define the sizes instead?

height:15%;
width:10%;

Answer №2

Don't complicate things, try using floats and percentages for sizing and positioning.

img {
    margin-top: 200px; /* Adjust top margin to position */
    float: left; /* Use float to align images to the left */
    width: 33%; /* Divide 100% by 3 images = 33.3% each */
    max-width: 100%; /* Keep proportions constrained with max width */
}
<img src="http://lorempixel.com/400/200/sports/1" class="tt1" > 
<img src="http://lorempixel.com/400/200/sports/2" class="tt2" > 
<img src="http://lorempixel.com/400/200/sports/3" class="tt3" >

Answer №3

When designing a website that is responsive, there are two main options for adjusting images and font sizes based on the screen size:

1 - Using percentages for positioning, such as height: 30%; width: 30%;

2 - Implementing media queries, which allow you to set specific styles based on media features like width, height, and color.

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

Remove any errors as soon as the input field becomes valid

My current setup involves AngularJS with node.js. To handle errors, I have devised the following strategy: node router effect.js: router.post('/', function(req, res, next){ req.checkBody('name', 'Eff ...

javascripthtmlangularjsnode.js

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

javascripthtmlcss

How can we have a div stay at the top of the screen when scrolling down, but return to its original position when scrolling back up?

By utilizing this code, a div with position: absolute (top: 46px) on a page will become fixed to the top of the page (top: 0px) once the user scrolls to a certain point (the distance from the div to the top of the page). $(window).scroll(function (e) { ...

javascriptcss

The shade of gray on Google Maps is distinctive

Why is my Google Maps script gray when the page loads? When I inspect the elements, it seems like it's due to resizing. Can anyone help me with this issue? Thanks in advance for any assistance. Below is the HTML code for the map which is included with ...

htmlmaps

Is there a way to create a button in an HTML project that will launch the user's email client?

Looking for some guidance on coding a homepage with HTML and CSS as I navigate my way through the world of web development. Take a look at this screenshot for reference: In the Jumbotron section, you'll notice that I have integrated a couple of boot ...

htmlcsstwitter-bootstrap

Concealing the side navigation menu with HTML and CSS

Hey there, I'm trying to make my navbar automatically hide when the mouse is moved. I found an example that I want to use here. Despite reading some online documentation, I just can't seem to figure out how to do it. Here's a snippet of my c ...

htmlcssweb-applicationscss-transitions

Managing touch devices and animations when hovering

Is there a way to remove or prevent all hover effects on a touch device? I've tried various scripts, but none seem to work for me. How can I test it with dev tools? I attempted this script but received an error: Cannot read property 'addEventList ...

jquerycsshovertouch

The modal window pops up immediately upon the first click

Experience a dynamic modal element that springs to life with just the click of a button or an image. The magic lies in the combination of HTML, CSS, and jQuery code: <div id="modal-1" class="modal"> <div class="button modal-button" data-butto ...

javascriptjqueryhtmlcss

Customizing the appearance of ASP.NET file uploader for various sizes

Has anyone successfully changed the width of the ASP.NET file uploader? I attempted by adding the CssClass, but it did not work. Is there an alternative method to adjust the width? Thanks in advance. ...

asp.nethtmlfile-uploadcss

Ways to adjust the size of an HTML fieldset?

Is there a way to decrease the space between the paragraph and the border of this fieldset? I attempted to adjust the margins in the following manner: fieldset { margin: 1px; margin-top: 2px; border-top-right-radius: 1px; } <fieldset> < ...

htmlcss

Reset the child JSP page to its original appearance

Displayed below is a JSP page: <div id="tabs-7" style="width: 100%;"> <form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data"> <div class="inputWidgetContainer"> <div class="inputWidget"> <table> ...

javascriptjqueryhtmlajaxjsp

Unable to Toggle the 'Checked' Prop on Selection with React Bootstrap CheckBox

As a newcomer to React Bootstrap, I've been encountering an irritating problem with checkboxes in a form I'm developing. After updating the state, the checkboxes don't remain checked when selected. However, if I check them again, they stay ...

htmlreactjsreact-bootstrap

unable to view the contents of the template using the directive

I am facing an issue with the Directive, as it is not adding an element to the Template. This directive has been included in the .html file. There are no errors being displayed in the console. directive.js: app.directive('myDirective', function ...

angularjshtmlangularjs-directive

What is the best way to customize the look of the v-calendar component in Vue.js?

I've recently started a project that involves Vue.js, and I needed to create a datepicker for it. After some research, I opted to utilize the v-calendar package. The implementation of the component went smoothly and functioned as expected right out o ...

cssvue.jsdatepickervcalendar

Show the table within the flex container

I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...

cssflexbox

Utilizing Modernizr for detecting support of background-clip:text functionality

Recently, I decided to utilize Modernizr in order to check for support of the css property background-clip: text. After some research, I came across this page:https://github.com/Modernizr/Modernizr/issues/199 I then added the following code to my website ...

csshtmlmodernizr

Get rid of the "clear field" X button for IE11 on Windows 8

After trying out the suggestions provided in Remove IE10's "clear field" X button on certain inputs? .someinput::-ms-clear { display: none; } I successfully removed the X button on IE 11 running on Windows 7, but unfortunately it didn&a ...

cssinternet-explorerwindows-8

"Can someone guide me on the process of transmitting data to a client using Node in combination with

I am new to web development and struggling to understand how to transfer data from the Node server to the client while also displaying an HTML page. I am aware that res.send() is used to send data, but I'm having difficulty maintaining the client disp ...

javascripthtmlnode.jsexpressweb-development-server

Flex container scrollable element not functioning consistently between different browsers

Today, I've spent most of my time experimenting with various solutions but I'm facing difficulty making them work consistently across different browsers. My goal is to have 2 sections within a fixed div: the first section with a set height and t ...

htmlcssflexbox

How can you create a jQuery fade in effect for a single <li> element

I'm in the process of developing a task management app that generates a new li element every time a user adds an item. However, I am facing an issue where fadeIn() is activating for every li on the page whenever a new item is added. Does anyone have s ...

javascriptjqueryhtmlcss