Creating HTML code for a mobile responsive design

I am facing an issue with my clinic webpage where the images appear differently on PC and mobile devices. I am new to HTML and CSS, so I tried using max-width: 100% but it didn't work. The code was originally created by someone else and I need help fixing this problem.

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

https://i.sstatic.net/etnkG.jpg

html

<!-- STAFF SECTION BEGINS -->
        <section class="staff">
            <div class="container">
                <h1>
                    Spesialister
                </h1>

                <div class="justinas">                        
                    <div class="justinas-picture"> 
                    </div>
                    <div class="justinas-background">
                        <h2>
                            Justinas Vitkus
                        </h2>
                        <div>
                            Tannlege 
                        </div>                            
                    </div>
                </div>

                <div class="jarek">                        
                    <div class="jarek-picture"> 
                    </div>
                    <div class="jarek-background">
                        <h2>
                            Jarek Menczak
                        </h2>
                        <div>
                            Tannlege 
                        </div>                            
                    </div>
                </div>
htmlcssresponsive

Answer №1

    .team .container .justinas .justinas-picture {
  width: 40%;
  height: 60vh;
  background-image: url(../images/new_03.2020/22.1.jpg);
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center center;
  margin-top: -30px;
}
.team .container .justinas .justinas-background {
  width: 60%;
  text-align: center;
  margin-right: 50px;
}
.team .container .justinas .justinas-background h2 {
  font-size: 1.7rem;
  color: #0099ff;
  border: solid 4px #0099ff;
  border-radius: 25px;
  padding: 20px 0 20px 0;
  margin-bottom: 75px;
}
.team .container .justinas .justinas-background div {
  font-size: 1.5rem;
  font-weight: bold;
  color: #7d625a;
  margin-bottom: 75px;
  text-transform: uppercase;
}
.team .container .jarek {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 50px 0 50px 0;
}
.team .container .jarek .jarek-picture {
  width: 40%;
  height: 60vh;
  background-image: url(../images/team/jarek.jpg);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center center;
  margin-top: -30px;
}
.team .container .jarek .jarek-background {
  width: 60%;
  text-align: center;
  margin-right: 50px;
}
.team .container .jarek .jarek-background h2 {
  font-size: 1.7rem;
  color: #0099ff;
  border: solid 4px #0099ff;
  border-radius: 25px;
  padding: 20px 0 20px 0;
  margin-bottom: 75px;
}
.team .container .jarek .jarek-background div {
  font-size: 1.5rem;
  font-weight: bold;
  color: #7d625a;
  margin-bottom: 75px;
  text-transform: uppercase;

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

What's the best way to add two distinct colors as background for a header with css?

h2 {background-color:#C61236; color:#FFFFFF; font-size:medium; line-height:1.5; text-indent:20px;} Although the current setup looks good, I am looking to incorporate a new color block at the start of the text. I'm not sure what steps to take nex ...

css

Guide on replacing the character "&" in PHP with ease

I am encountering an issue where some output on the page contains a space character written as "&nbsp;". I need to replace it back with a regular space. I attempted using str_replace("&nbsp"," ",$mystr) and even preg_replace("/(&nbsp;)/", " ", ...

phphtmlregex

Creating a visually engaging parallax effect in two columns with differing lengths that align perfectly at the conclusion

Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom. You can chec ...

jquerycsshtmltwitter-bootstrapparallax

The background image does not fully extend across the entire space

I am struggling to find the solution to a simple issue on my website, michelleforboe.com. The background image in a div is not covering the entire space as intended. I have tried using calc to set the height of the div, but it seems to be slightly off. A ...

cssparallax

Troubleshooting: CSS Selectors Hover Functionality Not Functioning as

I am having an issue where the styling does not change the display to block when hovering. Any insights or feedback would be greatly appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="t ...

htmlcss

How do Box and Grid components differ in Material-UI?

Can you please explain the distinction between Box and Grid in Material-UI? How do I know when to use each one? I'm struggling to understand their differences. ...

cssreactjsmaterial-ui

VS code showing live server as installed but failing to function properly

After installing the live server extension, I noticed that my browser is not updating when I save my HTML or other files. What could be causing this issue? ...

javascripthtmlcssvisual-studio-code

Is it possible to incorporate a CSS3 transition into the styling of a list of images?

Looking to achieve a CSS3 linear transition for a "list-style-image" specifically for Firefox? You'll need to include "-moz-" in your code. -moz-transition: list-style-image 0.2s linear; However, the above code is not producing the desired result. I ...

htmlfirefoxcss

Clashing CSS Styles: Font Size Edition

Can someone explain how CSS font sizes work? I set a specific line to be 200% font size, but changing the body font size affected it. Shouldn't the line maintain its specified size? When the body font size is changed from 12pt to 8pt, the line "There ...

cssfontssize

Thumbnails on the grid are vertically aligned to the top

How can I vertically align grid items at the top without manually setting grid span properties for li elements? I need the layout to be flexible and work for any number of list elements. ul { position: absolute; left: 0; top: 0; width: 400px; ...

csscss-grid

Increasing box width in Django

I'm currently working on a website using Django all-auth for authentication. Everything is functioning perfectly, but I'm wondering if there's a way to increase the size of the username and password input boxes using HTML. Below is the code ...

htmlcssdjango

The appearance of the logout button may differ depending on the web browser being used

I have implemented a straightforward logout button using the following code: <li><a href="http://localhost:8666/web1/profile/mainpage/logout.php" onclick="return confirm('Are you sure to logout?');">Log Out</a>&l ...

javascriptphpjqueryhtmlcss

Looking for a solution to organize the dynamically generated list items in an HTML page

I am currently working on a movie listing website where all the movies are displayed in sequence based on their #TITLE#. The webpage is generated automatically by the software using a template file. Here is the section of code in the template file that sho ...

javascripthtmlcss

Incorporating Google fonts into email designs

I am struggling to get Google fonts to display properly in my newsletter emails. Here is the code snippet I have been using: $html=" <html> <style> @import url(http://fonts.googleapis.com/css?family=Lato|Simonetta); </style> <body& ...

cssemailgoogle-font-api

Making sure all items in the top row of Flexbox columns have the same height

Within my flex wrapper, I have multiple column components with various flex items inside. Each column displays content adjacent to each other. The challenge is to ensure that the top item in each column has an equal height, creating a row-like effect. I&a ...

htmlcssflexboxcss-grid

"Implementing a full page refresh when interacting with a map using

Here is an example of how I display a map on the entire page: <div id="map_canvas"> </div> UPDATE 2: I have successfully displayed a menu on the map, but there is a problem. When I click on the button, the menu appears briefly and then disapp ...

javascriptjquerycsslinq

What is the best method to adjust the width of the <option> tag within the <select> tag using CSS?

<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="s ...

htmlcsshtml-select

"Excessive overflow results in the displacement of the following block

When viewing on smaller screens, the blocks move down due to oversized images causing overflow. Is there a way to simulate collision in this scenario? <div class="image"> <img src="img/1.jpg" /> </div> <div class="image"> & ...

htmlcsssass

What steps can be taken to prevent an event from being triggered once it has already started but has not yet concluded?

Let's talk about the navigation bar on the website. Clicking on it toggles the menu holder to slide in and out from the side. It's a simple interaction. The bar contains an icon with the text 'MENU'. When you open the menu, the icon cha ...

javascriptjqueryhtmltexteffect

The functionality of CSS columns is not supported in Firefox browser

Currently, I am working on a web page design inspired by Pinterest. However, I have encountered an issue where the columns property is not functioning properly in Firefox. You can find the example I am trying to replicate here. Feel free to test it in Fir ...

htmlcssfirefox