Question

I try to make image a section of description texts responsive.

"md is in row image texts"

sm should be in column (but the title and texts are too narrow) image texts

The problem is When I turn into mobile mode, the texts are too narrow. I want to make them fit the screen size.

Codes

<template>
  <v-container fluid>
    <v-layout >
      <v-col >
        <v-row align="center" justify="center">
          <v-img
            src="https://images.pexels.com/photos/3987020/pexels-photo-3987020.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            lazy-src="random image"
            aspect-ratio="1"
            
            :width="$vuetify.breakpoint.xs 
                ? '400px' 
                : ($vuetify.breakpoint.sm
                    ? '450px' 
                    : ($vuetify.breakpoint.md
                        ? '480px'
                        : ($vuetify.breakpoint.lg
                            ? '500px' 
                            : '550px'
                        )
                    )
                )"
            :height="$vuetify.breakpoint.xs 
                ? '250px' 
                : ($vuetify.breakpoint.sm
                    ? '300px' 
                    : ($vuetify.breakpoint.md
                        ? '350px'
                        : ($vuetify.breakpoint.lg
                            ? '400px' 
                            : '450px'
                        )
                    )
                )"
          />
        </v-row>
      </v-col>
      <v-col cols="6" >
        <div align="center" justify="center" >
          <div>
              <h1 >A simple Read More, Read Less pen in Vue.js</h1>
            
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis lectus magna
                fringilla urna. Etiam tempor orci eu lobortis. Integer quis auctor elit sed vulputate mi sit. Lacinia
                at quis risus sed vulputate odio ut enim blandit. Nibh praesent tristique magna sit amet purus. Eleifend donec pretium vulputate sapien nec
                sagittis. Facilisi morbi tempus iaculis urna id volutpat. Ultrices neque ornare aenean euismod.<span v-if="readMore"></span>
                <span v-else>...</span>
              </p>
          </div>
        </div>
      </v-col>
    </v-layout>
  </v-container>
</template>
    ```

CodePudding user response：

Note removal of unnecessary divs. Also v-layout is no longer needed as of Vuetify 2.x.

<v-container fluid>
 <v-row align="center" justify="center">
  <v-col cols=12 md=6>
   <v-img />
  </v-col>
  <v-col cols=12 md=6 align="center" justify="center">
   <h1></h1>
   <p></p>
  </v-col>
 </row>
</v-container>