Why are my images extending outside their parent columns?

Question

I am creating a web application in asp.net and I am using bootstrap version 4 for the layout of the site.

I have the following code to include a title on the left hand side (with some additional text) and then the image on the right, however when I resize the screen the image overlaps the "Welcome to the site" before it then eventually stacks the columns.

<div class="container-fluid">
    <div class="row portal-intro">
        <div class="col-md-4">
            <p class="home-header">Welcome to the site</p>
            <p>
                You can make a variety of applications, reports and requests by using our online forms.
                For example you can apply for resident permits, report an issue or you can request a call back.
            </p>
        </div>
        <div class="col-md-8">
            <img class="img-fluid" src="~/Content/Images/city.png" />

        </div>
    </div>

</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            <p>
                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
                enables a clean separation of concerns and gives you full control over markup
                for enjoyable, agile development.
            </p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Get more libraries</h2>
            <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Web Hosting</h2>
            <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
        </div>
    </div>
</div>

I used img-fluid to see if that was the issue, but it still happens. The image eventually does stack it's just the "in between" size where it overlaps and is fine when the scree is full width.

I haven't added any additional CSS as this is done by the addition of the img-fluid class.

It may be worth adding that I have also tried setting the image to the background of the column and it does the same, suggesting there may be a problem with the column on the left rather than the image.

Answer 1

The problem is that your text is so large that the individual words don't fit the column space you've allotted. Reduce font size in a responsive way and it's all fine. For example:

@media (min-width: 768px) {
    .home-header {
        font-size: 30px;
    }
}

Problem demonstration

Also, you should be using heading tags for headings. Semantic document structure is important.