What is the best way to incorporate width adjustments in an image source for a responsive website?

Currently learning CSS and experimenting with it on an HTML page. For reference, I'm using this link.

Encountering an issue with a responsive header image that adjusts size based on device (small on mobile, large on desktop). Is it possible to achieve this effect?

 /* CSS code here */ 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <title>Title</title>
</head>

<body>
  <div id="container">
    <div class="offwhitepattern">
      <header>
        <div class="header">
          <div>
            <i class="menu_icon fl"></i>
            <h2>
              <a class="logoname">
                                TOI
                            </a>
            </h2>
          </div>
          <div class="topsocial fr">
            <a href="">share</a>
          </div>
        </div>
      </header>
      <div class="first_news">
        <div class="top_new_header">
          <div class="info">
            <p>Sports / IPL</p>
            <p>Times of India | Apr 19, 2018 | 22:03:25 IST</p>
          </div>
          <div class="image_heading">
            <div class="img_heading_div">
              <img src="https://static.toiimg.com/photo/msid-63716346/63716346.jpg?pl=63716346" />
            </div>
            <h1>Mumbai Indians vs Delhi Daredevils, Match 9, Mumbai</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Seeking guidance on creating a different view of an image for mobile and desktop similar to the implementation in the referenced link. View the image here.

https://i.sstatic.net/jtgEl.png

For mobile view, I want the image without a border.

https://i.sstatic.net/nl2OZ.png

On desktop view, I'd like to add a border and increase the height compared to the web URL image.

jqueryhtmlcss

Answer №1

body {
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  border: 0;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  webkit-text-size-adjust: none;
}

a {
  text-decoration: none;
}

.offwhitepattern {
  background-color: #eee;
}

.header {
  background: #af2c2c;
  padding: 10px 20px;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.topsocial {
  position: absolute;
  right: 20px;
  top: 11px;
}

.topsocial a {
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
}

.menu_icon {
  display: block;
  background-position: -70px -92px;
  background-image: url(https://static.toiimg.com/photo/52121907.cms);
  width: 30px;
  height: 24px;
  opacity: .8;
  background-size: 200px;
  position: relative;
  left: -6px;
}

.logoname {
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-size: 21px;
}

.first_news {}

.top_new_header {
  padding: 0;
  margin: 0;
  background: linear-gradient(20deg, rgba(50, 150, 70, 1), rgba(0, 50, 100, .1)60%), linear-gradient(27deg, rgba(40, 50, 120, 1), rgba(20, 150, 100, .2) 60%), linear-gradient(120deg, rgba(10, 120, 20, 1), rgba(100, 100, 100, 0) 55%), linear-gradient(-80deg, rgba(0, 150, 0, 1), rgba(255, 255, 255, 1) 70%);
}

.info p {
  text-transform: uppercase;
  font-size: 0.7em;
  color: #fff;
}

.info {
  text-align: center;
}

.top_new_header {
  padding: 20px;
  margin: 0;
}

.info p:first-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.image_heading {
  padding: 20px 0 0 0;
  margin: 0;
}

.image_heading .img_heading_div {
  width: 40%;
  margin: 0px 15px 0px -23px;
  display: inline-block;
  box-sizing: border-box;
  height: 70px;
  border: 3px solid #fff; /* Added border here */
}

.img_heading_div img {
  width: 100%;
}

.image_heading h1 {
  width: calc(100% - 40%);
  color: #fff;
  box-sizing: border-box;
  vertical-align: top;
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <title>Title</title>
</head>

<body>
  <div id="container">
    <div class="offwhitepattern">
      <header>
        <div class="header">
          <div>
            <i class="menu_icon fl"></i>
            <h2>
              <a class="logoname">
                                TOI
                            </a>
            </h2>
          </div>
          <div class="topsocial fr">
            <a href="">share</a>
          </div>
        </div>
      </header>
      <div class="first_news">
        <div class="top_new_header">
          <div class="info">
            <p>Sports / IPL</p>
            <p>Times of India | Apr 19, 2018 | 22:03:25 IST</p>
          </div>
          <div class="image_heading">
            <div class="img_heading_div">
              <img src="https://static.toiimg.com/photo/msid-63716346/63716346.jpg?pl=63716346" />
            </div>
            <h1>Mumbai Indians vs Delhi Daredevils, Match 9, Mumbai</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

It was simple. You have added the border to both .image_heading_div and .image_heading. If you want to give the border to the image only, then you have to add the border to the image alone (image_heading_div). Check this now! I think this is what you required.

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

Issue with Tabulator: The top and bottom calculations do not shift position when a column is toggled. Seeking a solution to toggle a column and refresh the table without losing the current

My main objective is to toggle the visibility of toggles while maintaining consistent formatting. However, I currently face an issue where using a filter achieves this but results in losing the current scroll position of the tabulator, which is not accepta ...

javascriptjquerytabulator

Display dynamic content on the current PHP page using Ajax

I am currently facing an issue with sending data to the same php page using Ajax. The problem arises when I submit a form through Ajax, from a jQueryUI tab, and try to send the data back to the initially loaded php page in the tab. Below is the code snipp ...

phpjqueryajaxjquery-ui-tabs

What is the best way to create an event listener that can identify when a boolean variable switches to true?

Let's say we have a variable var menu_ready = false;. We also have an ajax function that will change menu_ready to true once the ajax operations are completed: // code snippet to set up event listener $(...).load(..., function() { ... menu_r ...

javascripteventsevent-handlingjquery

The icon for the weather on openweathermap is currently not displaying

Take a look at what my webpage looks like: http://prntscr.com/dg6dmm and also check out my codepen link: http://codepen.io/johnthorlby/pen/dOmaEr I am trying to extract the weather icon from the api call and display that icon (e.g. "02n") on the page base ...

javascriptjqueryhtmlcss

Using CSS or Javascript, you can eliminate the (textnode) from Github Gist lists

My goal is to extract the username and / values from a series of gists on Github Gists. The challenge lies in the fact that there are no identifiable classes or IDs for the / value. https://i.stack.imgur.com/9d0kl.png Below is the HTML snippet with a lin ...

javascripthtmlcsscustom-data-attribute

A guide on determining if a JSON data array yields a value or is empty

I've been attempting to determine if an element of an array contains empty data using jQuery, but it's not working as expected. When the value passed exists in the database, the array values are returned. However, when the passed value is incorr ...

phpjquerymysqljson

Does the size of a JavaScript heap, when it's big but not enough to cause a crash, have the potential to slow down a website, aside from just having an

Utilizing angular material dialog, I have incorporated a mat stepper with three tables (one per step), where one or two of them may contain an extensive amount of records. I have already integrated virtual scrolling to improve performance. However, when ...

javascripthtmlangularfrontend

Accessing the parent div in an Ajax success function

I am looking for a solution to hide a parent div when a link is clicked and an ajax call is successfully made. I have tried placing the hide() function within the success part of the ajax call, but it seems to not work: $('.mylink').click(functi ...

javascriptjqueryajaxjquery-animate

Modify the value of a dropdown menu with jQuery if the element's id contains three periods

I'm attempting to utilize JavaScript to modify the value of a select box on a ToysRUs address page. This is part of an extension project that automatically populates an address form. Despite my efforts, I keep encountering null when trying to select t ...

jqueryselectselector

Can the w3 validator be configured to disregard PHP tags?

I am facing issues with the online validator flagging errors for my php tags. To validate my HTML, I currently have to manually remove all the php inserts which is quite time-consuming. Is there a more efficient way to handle this problem? Below is an e ...

phphtmlw3c-validation

Breaking a line within a list item will create additional spacing between the lines

Is there a way to break a line <br/> inside a <li> tag? For example: First line second line Second list item Third list item I've tried setting margin and padding to 0, but I still get an unwanted space between the lines. Any suggesti ...

htmlcss

What's the best way to correct a word that is positioned at the bottom of a banner image?

https://i.sstatic.net/3gSoi.pngI am a newcomer to all of this. I have a banner image and I want to position a word at the bottom center of the banner. I've tried using padding, position, and text-align, but it's not responsive - when I widen the ...

cssbootstrap-5

The content loses functionality once I add an overlay color to the background image div

I'm facing an issue with a div that has a background image, text, and a button in the center. Whenever I add an overlay color on top of the background image, the text and button seem to be disabled or unclickable. My goal is to ensure that the Read M ...

javascriptjqueryhtmlcss

Is it possible to automatically select a file and upload it to a specific server? If so, how can this

Hey there! I'm looking for a code snippet that allows me to automatically select a file and upload it to a specific link. Any ideas on how to accomplish this task? Here is the HTML code: <html> <head><title>Uploading</title>& ...

phphtmlforms

What is the process for designing custom width columns using Bootstrap?

I am working on a table with three columns that is styled using the Bootstrap class "table table-striped". However, I need the first column to be 100px in width, the second column to be 400px, and the third column to be 200px. How can I achieve this cust ...

htmlcsstwitter-bootstrap

Concealing and revealing an element using the CSS property visibility:hidden/visible

There are two div-boxes that should show/hide when clicking on another two div-boxes. I want the divs to maintain their space so as not to disrupt the DOM, ruling out the use of .toggle(). I attempted this approach without success: $('#red, #pink&ap ...

javascriptjquerycss

Saving game data from local storage to populate the player leaderboard

I have successfully developed a game in which users can play and their scores are stored locally. However, I am facing a challenge in figuring out how to showcase the scores of all users in a table on the Rankings page. Player Ranking Page <?php inclu ...

javascripthtmllocal-storage

Getting text between Span tags using Selenium in Python

Struggling to extract the name "Margaret Osbon" from the following HTML using Python and Selenium. Despite trying different techniques, the printed output always comes out blank. <div class="author-info hidden-md"> By (autho ...

pythonhtmlselenium

jQuery Validator on a "Page-Level" Basis

I've already created a custom jQuery validator method that is linked to one or more specific dropdown lists in my asp.net project. jQuery.validator.addMethod("dropdownBoxHasItemSelected", function (value, select, arg) { var returnValue = false; ...

jqueryasp.netjquery-validatevalidation

What is the best way to extract the text inside a div element based on the input value in a

I attempted to extract the innerText of a div along with the input values within it. For instance: <div> My name is Shubham, I work for <input type="text"/> for the last 5 years.</div> My objective is to retrieve all the text ...

javascripthtmlreactjs