Creating dynamic and flexible designs for both images and text

I'm having trouble making my image and text responsive. I have the desired format for desktop, but it's not translating correctly to tablet. Can someone assist me with this?

This is the layout for the desktop version: https://i.sstatic.net/FzStm.png

And this is how it appears on a tablet screen size of 768 pixels: https://i.sstatic.net/Qg3fl.png

My goal is to make the tablet view resemble the desktop layout: https://i.sstatic.net/GVOwt.png

@media (min-width:641px) {
.home-top{
  background: url(../../images/index/u155.png);
  background-position: center;
  background-repeat: no-repeat;
  min-height: 280px;
  color:#fff;
  padding-top: 30px; 
  padding-bottom: 30px; 
    }
  }
<div class="home-top ">
    <div class="container">
        <div class="lg-container">
            <div class="lg-container">
                <div class="row">
                    <div class="col-md-4 "><img src="<?php echo URL ?>public/images/image_directeur.png" class="director-img"></div>
                      <div class="col-md-8 ">Mot de l’Inspecteur Général en charge de l'IGF <br><br>Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur général Mr Salomon Jude Alix Patrick...  Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur Général Mr Guy Romero LATRY...
                        <br><br>
                        Guy Romero LATRY <span style="float: right;"><button class="home-top-btn">Lire l'article >></button></span>

                    </div>

                </div>
            </div>
        </div>
    </div>

</div>

Answer №1

The col-md-* is designed for screen sizes greater than 992px.

To ensure correct proportions on smaller screens, it's recommended to include 'col-sm-4' in the first column div and 'col-sm-8' in the second column div. It's important to add these classes without replacing any existing ones.

By following this approach, you can achieve a responsive layout that adapts well to varying screen sizes.

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

The appearance of all input forms in MaterializeCSS when used in an electron environment appears to

After following the instructions here on how to get started with Materialize CSS, I am having issues with my input form appearing strange: https://i.sstatic.net/lveS2.png The contents of my current index.html file are as follows: <!DOCTYPE html> &l ...

"Exploring the process of retrieving controller data through an AJAX request for the purpose of dynamically populating

My HTML code looks like this: <form method="get" name="form"> <select name="grade" data-url="{{ path_for('get.student') }}"> <option value="">-- Choose Grade --</option> <option value="10">10< ...

What is the process for converting HTML to RTF using Java programming language?

When working with the basic API of JAVA using RTFEditorKit and HTMLEditorKit, I encountered a limitation where certain tags like <br/> and <table> were not recognized. In my search for better solutions to convert HTML to RTF, I came across two ...

.NET 6 facing controller path value issues due to BeginForm

Since upgrading my app from .NET Framework 4.8 to .NET6, I have noticed a strange behavior with Html.BeginForm altering the slash to "%2F" in the controller path, making them unreachable. For example: <form action="/Admin/Report/Download ...

Using CSS to create sleek all-black Flaticons

After trying various solutions, I am still unable to fix this issue. I downloaded some icons and in the demo, they all appear as they should, with a more colorful aesthetic. Here is what the icons should look like: However, this is how the icons actually ...

The browser encountered an issue trying to load a resource from a directory with multiple nested levels

I've stumbled upon an unusual issue. Here is a snapshot from the inspector tools. The browser is unable to load certain resources even though they do exist. When I try to access the URL in another tab, the resource loads successfully. URLs in the i ...

issue encountered when attempting to execute the function during the on-change event

While attempting to develop a todo app, I encountered an issue where calling the function markComplete on each checked or unchecked checkbox resulted in an error message stating cannot read property 'completed' of undefined. What could be the so ...

How to implement an overlay fix in HTML

Here is a problem I need help with: The image has an overlay with a lighter black background applied. However, the text is also becoming overlaid, which is not the desired effect. Can anyone provide a solution to fix this issue? ...

Adjust the remaining choices according to the dropdown selection

I am looking to dynamically adjust other dropdown menus based on the selection in a specific dropdown. For example, when the main dropdown is changed to "Change," I want the other dropdowns to automatically select the "Refused to Answer" option. HTML < ...

issue with selecting tabs in jquery

I need help with a problem that is connected to my previous article on CSS, button selection, and HTML tags. You can find the article here. I am not very proficient in JavaScript, so I would appreciate any insights or guidance on how to tackle this issue. ...

Pressing the button is not functioning correctly as it results in an Uncaught ReferenceError: toggleText has not been defined

While I'm in the process of diving into JavaScript, I've encountered an issue I'm struggling to resolve. I'm attempting to modify the text on a button after it has been clicked, but I keep receiving an error message indicating that the ...

Develop a line using botbuilder

Good day. I'm currently working on a vue js component that will function as a botbuilder. The main goal is to manipulate the cards displayed on the screen and establish links between them to define the flow of actions. Here's an image for referen ...

Encountered an error while attempting to load resource: the server returned a 404 (Not Found) status code when trying to load an image in an

I am looking to dynamically load an image when it is selected from a file picker dialog. The code provided below attempts to achieve this, however, the image does not load into the img tag. <script src="https://cdnjs.cloudflare.com/ajax/libs/jq ...

Prevent Vertical Scrolling with Jquery on right-click functionality

When a user right-clicks in my application, I present them with some options. However, when the user clicks on an option such as "copy," the page always scrolls to the top. I am struggling to prevent this automatic scrolling. I attempted to use the anima ...

Can Socket.IO link to a source tag that doesn't actually exist?

As I was following the 'Get started thing' tutorial on Socket.IO, I encountered a step that required me to add the socket.io.js script to my HTML page. The instruction provided was: /socket.io/socket.io.js However, when I checked my folders, I ...

Using either Canvas.toBlob or Canvas.toDataURL results in me obtaining an image with a transparent

Hey there! I'm currently working on a project that requires the user to crop and upload images. For cropping, I am utilizing react-cropper. My challenge lies in dealing with Chrome's limitation on dataURL to 65529 pixels as mentioned in this M ...

How to play two audio files at the same time on iOS Safari

I encountered a unique challenge in Javascript when attempting to play two audio files simultaneously on iOS Safari. One file is the voice script, while the other serves as background sound playing on loop. The code snippet I utilized for this task is as f ...

What is the best way to conceal the dt tag when the dd tag contains no value

Is there a way to hide the "Subject" if the "subject_title" field is empty? <dt class="col-sm-6 text-dark" >Subject</dt> <dd class="col-sm-6">{{$course_dtl->subject_title }}</dd> For example, I would li ...

I'm currently working with React and experiencing issues with my components being unrendered

I'm currently navigating a React tutorial and I'm having issues getting this code to display some buttons. I'm utilizing codepen.io to work on the code and can provide the tutorial link if needed. const clips = [ { keyCode: 81, key ...

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...