Overlapping containers

Recently, I attempted to implement a Bootstrap 4.1 theme into my yii2 project. However, I encountered an issue where the containers were overlapping by about half of their width. Surprisingly, the classes I used are directly from the bootstrap framework. Here is an image displaying the problem: https://i.sstatic.net/ccisL.jpg Below is a snippet of my code along with the classes being utilized:

 <div class="col-sm-6 col-lg-4" style="text-align:center;">
     <div class="thumbnail">          
         <div class="caption" style="align-items: center;">        
            <img style="width=200 height=300"><?=HtmlPurifier::process($model->thumnail)?></img>
            <h4 class="overme"><?=Html::encode ($model->title)?></h4>
            <p>
               <?=Html::a('More Informations', ['/library/books/detail', 'id' => $model->id], ['class'=>"btn btn-md
 btn-primary"])?>
            </p>
         </div>
     </div>
 </div>

If you're interested in viewing the site and the theme causing the issue, they can be accessed through these links:

To delve further into the bootstrap code of the theme itself, visit this link:

Answer №1

Modify this:

<img style="width=200 height=300" src="..." />

Transform into this:

<img style="width: 200px; height: auto; max-width: 100%;" src="..." />

The initial code contains incorrect CSS properties. It specifies a fixed height, which is not recommended for responsive design frameworks like bootstrap. The revised code sets the width to '100%' and the height dynamically adjusts maintaining aspect ratio ('auto'). The image's maximum width is limited to '200px' (a bit mind-boggling, I know).

While the 'width' attribute dictates a specific width of '200px', the 'max-width' property restricts the image from exceeding '100%' of its container's width ('400px' in a column). This adjustment ensures the image displays appropriately across different screen sizes.

I hope this explanation clarifies things for you!

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

How to position a column to the top of the page using Bootstrap's float left feature

Is it possible to float a column to the right of all other columns within the same row? <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <div class="row content"> <div clas ...

Changing the Color of Text on Your Mobile Website

I'm currently struggling with a minor issue on my website where the body text appears in white on desktop, which is fine. However, on smaller devices, the white text blends into the background and becomes unreadable. Is there a way to change the text ...

Arranging individual spans within a div using CSS for perfect alignment

My current code looks like this: <div id='div_selectores' class='row_titulo '> <span class="label_selector" id="lbl_show"></span><span id="div_selector_show"></span> <br /> <span class ...

What is the best way to create a clickable image with a box-shadow when a z-index of -1 is applied?

Is there a way to make an image clickable while still retaining the box shadow effect created using CSS3? Currently, I have set the z-index of -1 for the img tag to apply the box shadow. However, this makes the image not clickable when an href tag is added ...

What is the best time to fetch the height of an element containing an image?

I am working on my web app and I want to implement a popup element that contains an <img> element. Typically, the image source is larger than necessary, so I resize it using CSS. However, before displaying the popup, I need to determine its outerHeig ...

What could be causing my CSS dropdown menu to not display properly?

I'm having trouble getting the dropdown to work when hovering over the li element with "portfolio" in the text. The code seems correct, but nothing happens when I try to hover over "Portfolio." Below is the code snippet: #navmenu ul { position: ...

When the open button is clicked, the Div will toggle between open and closed states

Recently, some of my questions have not been well-received, which makes me feel a bit disheartened. It's important to remember to be kind when providing feedback. I've noticed that some people downvote without offering constructive criticism, whi ...

Propelling Information using the Chakra-UI Drawer Element

I've been exploring the features of the Chakra-UI drawer component and you can find more information about it here. Overall, the functionality aligns with my needs, except for one particular aspect - instead of pushing the content to the side, the dra ...

When attempting to access the submenu in Bootstrap 5 dropdown, it does not slide down as expected upon clicking

Why isn't the rest of the menu expanding downward when I select a submenu? The submenu is already selected, but it hides other items. How can I make it expand downwards? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

Troubleshooting Vue.js rendering problems on Safari_BROWSER

I'm encountering a strange issue with my portfolio website, which is built using Vue and Laravel. The problem arises specifically in Safari - the project thumbnails don't display until the browser window is resized. Here's the relevant code ...

I require assistance in obtaining the float value for the CSS property of 'font-size'

Can someone help me with retrieving the float value of the CSS 'font-size'? It works perfectly in Firefox, but I'm facing issues in Chrome, Safari, and IE. When trying to get this CSS value, it keeps converting to an integer instead of a flo ...

What is the best way to make the cursor display as 'wait' while a script is running?

During the execution of a lengthy javascript function, I would like to change the cursor style to 'wait' and then revert it back to normal once the function is complete. I initially tried using the following code: document.body.style.cursor = &a ...

Ensuring the width of a div matches the adjacent containers

I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set. The outer div (also using inline-block) should not expand beyond ...

The overlay on the mobile device is too large for the screen

I've designed a basic div overlay using the CSS code below: position:absolute; top:0; left:0; display:none; cursor:default; z-index:101; width:100%; height:100%; To show the overlay, jQuery is utilized. Everything works perfectly on desktop browsers ...

What is the reason behind CSS absolute positioning consistently being bound to the document body instead of the containing div?

Need help with HTML/CSS formatting. The webpage size is set to 1000 pixels by 1000 pixels and enclosed within a box. To aid alignment, I've added a temporary solid black border around the elements that will be hidden later on. The layout consists of ...

Ways to identify a modification in a div or body element?

I need help detecting changes in the content and body elements using JavaScript. The logic cannot be applied directly to the button itself. Are there any events available for this purpose? Can you provide a code sample? Check out this JS Bin link for ref ...

The information about the property is not appearing on the screen

I included the following CSS: nav label:AFTER { content: " ▾"; } However, when viewed in Chrome, it appears like this: content: " â–¾"; I have already added <meta charset="utf-8"/> to my JSP page and @CHARSET "utf-8"; in my CSS file. ...

The properties of the box model applied to unidentified inline boxes

Reference: CSS Specification Text directly contained inside a block container element (not within an inline element) is considered as an anonymous inline element. For example, in an HTML document like this: <p>Some <em>emphasized</em> ...

Instructions for applying a CSS width to a specific column in an HTML table within an email template for Outlook

When trying to develop an email template for Outlook, I encountered an issue with adding width to the column in an HTML table. Despite setting the property, it did not reflect correctly in the email. Various attempts were made to address this problem. < ...

Floating elements within scrolling loading

I've been trying to figure out how to add a loading scroll feature to my webpage, but I'm running into issues with the div not displaying correctly. Instead of loading underneath the scroll, the content pops up on the side as shown here when scro ...