Is there a way to use flexbox to decrease the size of images?

Struggling to make my code mobile-friendly. The PC version looks good, but on mobile, the bio stretches and text goes off the page. I can't seem to get the picture to shrink when viewed on a mobile device, or have the content neatly boxed alongside it. Any tips or advice would be greatly appreciated. Thanks in advance!

Mobile:

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

Computer:

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

div.readerone {
  display: flex;
  align-items: center;
}

p.right {
  border-radius: 5px!important;
  border: 1px ridge #AA9DE0;
  background-color: #E1E0FF;
  padding: 10px;
  margin-left: 20px;
}
<div class="readerone"><img src="https://image.ibb.co/fvO800/csongor-daniel- 
    hs-10-14-2015-016.jpg" alt="csongor-daniel-hs-10-14-2015-016" width="210" height="300" border="0" />
  <p class="right">bio desc.</p>
</div>

cssimagemobileflexboxshrink

Answer №1

To ensure proper display, it is essential to set the width percentage for your child elements:

div.readerone {
  display: flex;
  align-items: center;
}

div.readerone img { 
  width: 50%;
  object-fit: contain;
}

p.right {
  width: 50%;
  border-radius: 5px!important;
  border: 1px ridge #AA9DE0;
  background-color: #E1E0FF;
  padding: 10px;
  margin-left: 20px;
}
<div class="readerone"><img src="https://image.ibb.co/fvO800/csongor-daniel- 
    hs-10-14-2015-016.jpg" alt="csongor-daniel-hs-10-14-2015-016" width="210" height="300" border="0" />
  <p class="right">bio desc.</p>
</div>

For mobile devices, it is recommended to adjust the layout by placing the image above or below the text with the image at 100% and text at 100% width:

div.readerone { 
  display: flex;
  flex-direction: column;
}

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 is the best way to define a:link style within a div class structure?

I am trying to include an anchor tag within my HTML... Inside the tag, I have the following CSS code: .foo { white-space:nowrap; text-shadow: 0 -1px 0 #000; color: #000; font-family: Helvetica Neue, Helvetica, arial; font-size: ...

csshtmlstylesheet

Angular date control and its corresponding date panel are not properly aligned on the user interface

I am utilizing Angular and Angular Material for date control display. See the code snippet below: <input type="date" (change)="validateDateRange($event,true, index)" class="form-control oot-start-date align-middle" name=& ...

cssangularangular-material

Discrepancy in Bootstrap Navbar Brand and Links color appearance when attempting to change font and color across entire navbar

As a newcomer to CSS, I am facing an issue with my navbar. I want both the navbar brand and navbar links to be the same size and color. However, when I try to change the font and color of the entire navbar, only the font changes and the color remains incon ...

htmlcssbootstrap-4

The vertical tabs in JQueryUI lost their functionality when a few seemingly unrelated CSS styles were added

Check out the JsFiddle demo here I embarked on a mission to craft JQueryUI Vertical tabs by following the guidance provided in this example. The source code within the aforementioned link contains specific CSS styles: .ui-tabs-vertical { width: 55em; } ...

javascriptjqueryhtmlcssjquery-ui

Change a div to scroll vertically instead of expanding to accommodate its content

I am facing an issue with the layout I have created. It consists of a scrollable list of items in the center, with additional content above and below it in a column. The challenge is to make the list occupy all available empty space within the column witho ...

htmlcss

On mobile devices, the height of the absolutely positioned element is larger than its

I currently have an element with a background image that includes an absolutely positioned element at the bottom. As the screen width decreases, the height of the absolutely positioned element increases and surpasses the parent element. Since absolutely p ...

javascripthtmlcss

Tips on emphasizing all div elements and incorporating navigation to each of them

I am seeking a method to enhance a div with highlighting when there is a click or mouseover event. For instance, changing or adding a border color using JavaScript on click or mouseover is straightforward. Recently, I have been contemplating the idea of a ...

javascriptjquerycsshtml

Achieving vertical alignment of button contents in Bootstrap 4

Incorporating bootstrap 4 and material icons into my app has presented a challenge. Specifically, the issue arises when I attempt to create a button that contains both text and an icon. .button-icon { vertical-align: middle; } <button class="button ...

htmlcsstwitter-bootstrapbootstrap-4google-material-icons

Obtain or save the created QR code using VueJs and the vue-qrcode plugin

I am utilizing the "vue-qrcode" plugin to create a QR code for my users linking to their public profile, which they can then easily share on platforms such as business cards. My goal is to provide users with the option to download the QR code with one but ...

imagevue.jsdownloadcopyqr-code

The particular division is failing to display in its designated location

This is quite an interesting predicament I am facing! Currently, I am in the process of coding a website and incorporating the three.js flocking birds animation on a specific div labeled 'canvas-div'. My intention is to have this animation displa ...

javascriptcsscanvasthree.js

Specify the title attribute by using a language-based string

Can the title attribute content on an image be defined as a language string that can be overridden in a multilingual website? I am considering following this format: <img title="tooltip_mod".....> Creating a tooltip_mod INI file that defi ...

htmlimageattr

tips on customizing buttons within form groups

I have set up two separate form-groups: My goal is to click on each button within each group and toggle its style from grey to green, and vice versa. However, when I click on a button, all buttons within the group turn grey except for the one that was cli ...

javascriptjquerycssbootstrap-4

Capture any clicks that fall outside of the specified set

I am facing an issue with my navigation drop down menu. Currently, the pure CSS functionality requires users to click the link again to close the sub-menu. What I want is for the sub-menu to close whenever a click occurs outside of it. I attempted a solu ...

javascriptjqueryhtmlcss

Is there a reason why I need to rename the CSS file in order for it to function properly?

I recently completed editing the css file and saved it, but unfortunately, my css file isn't functioning properly. The display remains unchanged and the css files are not being loaded. However, when I decided to rename the css file, everything started ...

htmlcssbootstrap-4

Adjust the DIV dimensions to fit the background image perfectly

My question involves a DIV element with a specific style applied to it. .vplayer-container .logo { position: absolute; bottom: 50px; right: 10px; background: url(../img/logo.png) no-repeat; border: 1px solid #000000; max-width: 50px; max-height: 50 ...

htmlcssbackground-image

Ways to conceal a personalized context menu for right-click operations

I came across a helpful page (How to add a custom right-click menu to a webpage?) discussing "How to add a custom right-click menu to a webpage" The source does not provide any functionality to hide the menu. Any suggestions on how I can hide the menu? ...

jqueryhtmlcsstwitter-bootstrap-3

problem with the clientHeight attribute in window event handlers

The component below is designed to react to changes in window resize based on the container height. However, there seems to be an issue where the containerHeight variable increases as the window size decreases, but does not decrease when I make the window ...

javascriptcssreactjsflexbox

Is there a way to insert a dot after every two digits in a text field using Javascript upon keypress?

When inputting a 4-digit number (e.g. 1234) in my text field with value format 00.00, I want it to automatically adjust to the 12.34 format. How can I achieve this behavior using JavaScript on keyup event? ...

javascriptjqueryhtmlcss

How can we stop mobile email applications from automatically converting emails into a "mobile-friendly" layout without permission?

My email design is optimized to look great on mobile, web, and desktop mail clients. However, I'm facing a challenge with some mobile clients like Gmail on Android automatically reformatting the email to make it more mobile-friendly. This leads to a m ...

htmlcssemailmobilehtml-email

Having trouble installing css-sprite on Windows 8.1 using NPM

Having trouble installing css-sprite on my Windows 8.1 system. Here's what I have installed so far: Windows 8.1 (x64) Node.js 0.12 (x86) NPM 2.5.1 (x86) Python 2.7.9 (x86) Visual Studio 2013 Express (x86) I tried to install using the command: npm ...

pythoncssnode.jsnpm