When viewed on mobile devices, the image shrinks significantly

I'm experiencing an issue where the image shrinks significantly when viewed on a mobile device or when zooming in the browser. Can you help me understand why this is happening and suggest a solution? Here are the HTML and CSS code snippets:

HTML

<section id = "s" class = "s-section">
<div class = "center">
    <h1> Title Title Title Title Title  </h1>
    <img src = "img/hands01.jpeg" width = 50% max-width = 200% object-fit = cover class = "float-left" padding-right = "2">
    <div class = "s-paragraph">
        <p> Insert text here askdjfalksdflksa dflkasj dflkasj dlkf asdlkfj aslkdfj alskd flkas jdjflkas dlkf asdlkdf lakss dflkas sdflkas dlkf aslkdf lkask dflkas dsflk aslsdfaslkdf jaslkdfj lkasdj flkasj dflkas dlkfaslkdkf lksadj flkas dflkasj dlkf aslkdf asklsdjf lksaj jdflkas dlfkas lskdf aslkd fslkd lkasd flkasd jl</p>
    </div>
    <br>
</div>

CSS

.s-section {
  padding-top:8rem; 
  padding-bottom:5rem; 
  background:#ef9000;
}

.float-left {
  float: left;
  margin: 4px;
  padding-right: 2rem;
}

.s-paragraph {
  padding-top: 1rem;
}

.center {
  margin: auto;
  width: 60%;
  padding: 10px;
}

https://i.stack.imgur.com/mVKHd.png

https://i.stack.imgur.com/iMIpN.png

htmlcss

Answer №1

For those new to the world of Web Design and Development, I recommend starting with a solid understanding of media queries. You can learn more about them here and here. Once you feel comfortable with media queries, delve into the realm of grid systems in CSS.

After grasping these concepts, it's time to start creating mobile-responsive web elements.

If you're hesitant about using frameworks, check out this grid-system only option.

For those feeling adventurous or experienced with frameworks, consider exploring Bootstrap's Grid System.

One commonly-used example of Bootstrap is structured like this:

<div class="container">
    <div class="row">
        <div class="col">
            // Your content goes here
        </div>
         <div class="col">
            // Your content goes here
        </div>
         <div class="col">
            // Your content goes here
        </div>
    </div>
</div>

In this structure, the 

<div class="col"></div>
element has different variations for different viewports such as col-sm-2, col-lg-4, col-xl-12. The letters after "col-" indicate viewport size while the numbers represent grid columns taken in that viewport.

Answer №2

Have you considered implementing media queries?

Here's an example: 

body{
  padding: 0;
  margin: 0;
}

@media only screen and (max-width : 320px) {
   img{
     width: 100%;
     height: auto;
   }
}

http://example.com

Answer №3

Instead of relying on the % for width, consider using specific pixel values and incorporating media queries as suggested by @Denys Brustovskyi

<img src ="img/hands01.jpeg" width="50%" max-width = "200%" object-fit=cover class="float-left" padding-right="2">

Alternatively:

<img src ="img/hands01.jpeg" width="200px" max-width="400px" object-fit=cover class="float-left" padding-right="2">

You can also experiment with this CSS approach:

.className {
background: url('filepathForPhoto.jpg');
background-size: cover;
width: 200px;
}

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

Dynamically getting HTML and appending it to the body in AngularJS with MVC, allows for seamless binding to a

As someone transitioning from a jQuery background to learning AngularJS, I am facing challenges with what should be simple tasks. The particular issue I am struggling with involves dynamically adding HTML and binding it to a controller in a way that suits ...

javascriptjqueryhtmlangularjsasp.net-mvc

Adjust the panel size accordingly for smaller screens

My application is utilizing the Spotify API to retrieve names and images. These are then displayed on my webpage within cards/panels in the following format: <div class="col-md-4" v-if="type == 'tracks'" v-for="(track, index) in tracks"> ...

htmlcssvue.js

Using jQuery to generate a JSON object dynamically based on the values entered in each input field

I'm facing a situation where I need to extract data from a JSON format using PHP. However, I'm struggling with how to structure the Javascript object in order to dynamically create the JSON format. Here is my current scenario: <input title=" ...

javascriptjqueryhtmljson

Using Four Different Colour Borders in CSS

Is it possible to create a CSS border with 4 different colors on one side? Currently, I have the following: #header { border-color:#88a9eb; } I aim to achieve a border featuring four solid colors split equally at 25% each. Can this be done? I am looking ...

htmlcssborder

There seems to be an issue with the zebra striping in the rich:datatable component when using the rowClasses

I'm attempting to give my table a "zebra" color pattern for the rows, but it seems like the rowClasses attribute isn't functioning properly (edit: I don't see any colors applied to the table at all). Here is how I defined the styles: <s ...

cssrichfaceszebra-striping

Is there a way to disable the feature of saving input values?

I am dealing with an input field that looks like this: <input name="username" placeholder="Email" type="email" autocomplete="off" /> Even though I have set the autocomplete attribute to off, the previous value still appears when I open the page: M ...

htmlcssinputbrowser-cache

Changing styles with the use of bootstrap.css themes on the fly

I'm experimenting with toggling between a custom dark and light theme in my MVC application. On the _Layout.cshtml page, the default theme is loaded by the following code: <link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original. ...

javascripthtmlcssasp.net-mvc

How can I customize the color of Chrome's default date and time picker to a different shade of blue?

Is there a way to customize the color of the blue buttons, text, and date indicator in the native datetime picker for Chrome using CSS? https://i.stack.imgur.com/eZSaE.png ...

htmlcssgoogle-chromedatetimepicker

What are the steps to play this using Internet Explorer?

I am having trouble with my player code in Internet Explorer. Can anyone provide assistance on how to make it work across all browsers? <object data="http://bitcast-b.bitgravity.com/player/6/bitgravity_player_v6_1_4.swf" id="bitgravity_player_6" ...

htmlflash

Tips for incorporating a notification bar below the header

I'm fairly new to CSS and I'd like to create a black notification bar for free shipping right below the header, with white text. It needs to span the full width of the browser. I attempted to achieve this using CSS and `header::after`, but my te ...

css

Using CSS on a randomly selected div that is chosen after dividing the main div each time it is clicked

Imagine a square box displayed as a "div" element. When you click on it, it splits into an n x n grid with each square having a random background color. However, the issue I am encountering is that I want to apply additional CSS to each of these randomly c ...

javascriptjqueryhtmlcss

Retrieve a time stamp value from a database and showcase it using jQuery

My database query is retrieving the timestamp of when an item was entered, which I am then echoing back to my main page using PHP. The timestamp is in the format YYYY-MM-DD HH:MM:SS:MS and is displayed correctly in an HTML table. However, when I click on a ...

phpjqueryhtmltimestamp

Altering the background color of an individual mat-card component in an Angular application

Here is the representation of my mat-card list in my Angular application: <div [ngClass]="verticalResultsBarStyle"> <div class="innerDiv"> <mat-card [ngClass]="barStyle" *ngFor="let card of obs | async | paginate: { id: 'paginato ...

cssangulartypescriptfrontend

Avoiding redirection in Django template form

Currently, I am facing a challenge with my application that involves rendering a Django Template model form where images are referenced from another model. To manage the addition and deletion of images for this other model, I have implemented a button wit ...

javascripthtmldjangoformsdjango-templates

Can a FontAwesome icon be used as a button in Bootstrap?

Hi there, I'm trying to use a fontawesome icon as a button in my code. Here is what I have so far: <!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" ...

htmlcssbootstrap-4font-awesome

Utilizing PHP to create an interactive website

As a novice PHP developer, I took to Google in search of tutorials on creating dynamic PHP websites. What I found was that many tutorials used the $_GET variable to manipulate URLs and make them appear like this: example.com/?page=home example.com/?page= ...

phpjavascripthtmlcss

PHP Arrays and HTML Form Select Elements

I am facing a challenge with a form that contains multiple rows and numerous "select" drop-down menus in each row. While I'm presenting a simplified 2x2 example here, the actual form could extend up to 5x5. Here is an outline of my HTML form: <fo ...

phphtmlarraysforms

Avoid replacing CSS properties, instead use jQuery to supplement them

Can anyone help me figure out how to use the jquery .css() function without overwriting existing values, but instead adding additional values to css properties? For example, I have an element that currently has the css transform:translate(-50%, -50%). I w ...

jquerycsscss-transforms

Tips for horizontally aligning a list with sublist using CSS

Is there a way to align a horizontal list with a sublist in HTML and CSS? I want the menu items (Home, News, etc.) to be on one line, with submenu items below them. HTML <body> <div class="menu"> <ul class="menu_l ...

htmlcss

I have noticed that the display:none property for <span> elements does not seem to work in IE8 on some computers, although it does

<span id='x' style='display:none;'> <input type=button value='x'> </span> <span id='y' style='display:none;'> <input type=button value='y'> </span> Although th ...

html