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

Create an unordered list using the <ul> tag

Creating a ul as input is my goal, similar to this example on jsfiddle: http://jsfiddle.net/hailwood/u8zj5/ (However, I want to avoid using the tagit plugin and implement it myself) I envision allowing users to enter text in the input field and upon hitt ...

javascriptjqueryhtmlcss

How can I dynamically generate multiple Reactive Forms from an array of names using ngFor in Angular?

I am in the process of developing an ID lookup form using Angular. My goal is to generate multiple formGroups within the same HTML file based on an array of values I have, all while keeping my code DRY (Don't Repeat Yourself). Each formGroup will be l ...

javascripthtmlangulartypescript

`Make adjustments to the visual representation of crispy forms`

When using crispy forms, the labels for CheckboxSelectMultiple() fields are populated from the default string representation of objects defined in a list. To change this behavior, I am seeking assistance. Is it possible to create a custom string represent ...

htmldjangodjango-crispy-forms

concealing the date selection feature on the data picker

$('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onOpen: function(dateText, inst) { $("table.ui-datepicker-calendar").addClass('hide') }, onClos ...

javascriptjquerycsscalendar

What is the best way to set the width of an inner element as a percentage of the Body's width?

Applying a percentage width to any inner element of a page will typically result in that element taking a percentage of its parent container's width. Is there a way to specify the width of an inner element as a percentage of the overall Body width, r ...

csslayout

Exploring the Concept of Nested ViewModels in Knockout.js Version 3.2.0

I have a global view model that is applied to the main div and I also have other view models that I want to apply to nested elements within my main div However, I am encountering an issue: You cannot bind multiple times to the same element. Below is ...

javascripthtmldata-bindingknockout.jsviewmodel

When table cells are added dynamically, they are not encompassed by the solid fixed title bar when scrolling

My webpage has a fixed title bar with a high z-index that overlaps all other elements on the page when they are scrolled up, except for the dynamically created table cells. What attributes or styles do I need to set in order to hide the table cells behin ...

htmlcss

Looking for straightforward tips on parsing CSS code

Seeking advice on how to extract rules and property/values from a .css file or <style></style>. I am not in need of an elaborate parser, as the validity of selector text, property name, or value is not important. My main focus is ensuring that ...

c#vb.netparsingcss

What is causing my HTML wrapper to malfunction?

Below is the HTML code for my website: <div id="wrapper"> <div id="header"> <img src="images/MyBannerFinished.jpg" alt="Header" width="803" class="headerimage" /> </div> <!--- End Header ---> <div id="navbar"> <ul ...

htmlcsstagswrapper

Do you need to align images side by side and have clickable images positioned beneath each one?

After searching high and low, I couldn't find a similar question. My goal is to transform this from a vertical layout to a horizontal one: https://i.stack.imgur.com/4kZNM.png Check out the code snippet below: ghost<br class="newline"> <img ...

htmlcss

Steps for selecting a radio button based on a MySQL table value:

My table has two fields, name and gender. When I retrieve the data and attempt to display it in input fields, everything works fine for the Name field. However, I am curious if there is a way to automatically select the radio button based on the gender d ...

phpjqueryhtmlmysqlget

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a way to incorporate a magnifying glass into an HTML page using jQuery or within an Android app? Ideally, it would be for a single picture. In my application, I am displaying an HTML file from my assets in a webview. The HTML page utilizes jQuery ...

javascriptandroidjquerycssmagnification

Using JQuery toggleclass to add transitioning effects to a :after element

I'm using the toggleClass function to add the class .expend to a div with an ID of #menu, which increases the height of the menu from 100px to 200px with a smooth transition effect. I also have a pseudo-element #menu:after for aesthetic purposes. My ...

javascriptjqueryhtmlcss

Navigating without the need for a mouse click

Is there a way to automatically redirect without user interaction? I need the redirection to happen without clicking on anything <script> setInterval(function(){ window.location.replace("http://your.next.page/"); }, 5000); // Redirec ...

javascripthtmljquery

Converting counterup2 to pure vanilla JavaScript: step-by-step guide

Is there a way to convert the counterUp2 jQuery code to vanilla JavaScript? const counters = document.querySelectorAll('.counter'); function count(element) { let currentValue = 0; const targetValue = parseInt(element.innerText); let interv ...

javascripthtml

What could be the reason for the clone function not duplicating the data within the table

Recently, I utilized jQuery's clone method to duplicate and add an HTML table. The rows and cells of the table were added using jQuery. However, despite using clone, it only replicated the headers and CSS, not the appended data. This raises the ques ...

jqueryhtmlajaxasp.net-mvchtml-table

How can I adjust the indentation in Angular Prime-ng's p-tree component?

In my project, I am utilizing the primg-ng tree component for the sidebar. Currently, the output is displayed as shown here: https://i.stack.imgur.com/kcSQt.png However, I am looking to maintain consistent indentation levels without any adaptive changes ...

cssangularfrontendprimengprimeng-tree

Modify the :after property of an element using jQuery

Is there a different approach I can take to achieve this desired outcome? Currently, the code snippet below is not yielding the expected results. $('.child_flyout:after').css({'top':'20px'}); Are there any alternative method ...

jquerycss

Achieve a responsive layout by dynamically sizing child div elements to fill their parent container using percentage-based margins and

I'm having trouble getting the child divs to stretch to the parent, and I'm not sure if I need to specify a % width on #fullpage-content even though #middle is set to 76%. I seem to have forgotten... Would you like to check out this link where c ...

htmlcss

Retrieve particular JSON information on a single webpage by selecting an element on a separate page

My goal is to fetch specific information from a JSON file and display it on different HTML pages by clicking a button. I will achieve this using jQuery and plain JS. For the first HTML page, I want to show all products from the JSON in an element with id= ...

javascriptjqueryhtmljsonfrontend