Image positioned close to the border

Regrettably, I am encountering an issue while attempting to align the image to the edge of the screen.

<section class="hero-main">
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="hero-main__container">
                <div class="hero-main__header">
                    <h1>Lorem ipsum dolor sit amet<br> amet amet amet</h1>
                </div>
                <div class="hero-main__text">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
           <img src="images/map-flag.png" style="margin-left: 107px" class="" alt="">
        </div>
    </div>
</div>

The desired effect is shown in the screenshot. https://i.sstatic.net/o1MZi.png

Unfortunately, my current code does not position the image to the edge as intended and lacks responsivity when adjusted.

cssbootstrap-4

Answer №1

Perhaps this could be beneficial:

<img src="images/map-flag.png" style="max-width: calc(100% - 107px); margin-left:107px; " class="" alt="">

Alternatively, you may consider using:

<section class="hero-main" style="background-image: url('images/map-flag.png'); background-position: 100% 0; background-size: 50%; background-repeat: no-repeat;" >
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="hero-main__container">
                <div class="hero-main__header">
                    <h1>Lorem ipsum dolor sit amet<br> amet amet amet</h1>
                </div>
                <div class="hero-main__text">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-6">

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

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 showcase my subscription form on a web browser?

I am encountering an issue with my code. My goal is to generate a subscribe form modal. Although I have incorporated the subscribe form in my HTML document, upon running the code in the browser, the subscribe section is not visible. Can anyone offer assist ...

javascripthtmlcssbootstrap-5

What can I do to stop my list items from dropping below the menu even when there isn't enough space?

I'm facing an issue with my menu and despite several attempts, I can't seem to resolve it. In Firefox, everything looks fine, but in other browsers, the last anchor tag inside my menu keeps collapsing underneath. I've tried various solutions ...

csscss-float

What's the process for browsers to render the 'span' element?

<p> <span>cancel</span><span>confirm</span> </p> <hr> <p> <span>cancel</span> <span>confirm</span> </p> Both should display the same result. However, in the ...

htmlcss

The JScolor Color Picker has a slight misalignment

I am having an issue with the jscolor color picker on my webpage. The rainbow part of it appears offset within the rest of the picker. You can see what it looks like on my site here: (https://ibb.co/9N8dHXs). On my website, I have a large canvas for three ...

javascripthtmlcssjscolor

Tips for refreshing CSS following an ajax request

Currently, I am facing an issue with the CSS formatting on my page. I am using Django endless pagination to load content on page scroll. However, when new content is loaded, the CSS applied to the page does not work properly and needs to be refreshed. Can ...

javascriptpythoncssajaxdjango

The navbar links in Bootstrap 4 may be hidden, but the navbar brand still remains visible

I have implemented this code for my website's navbar, however, upon running it, I noticed that the navigation links are not visible. The navbar brand name "test" appears correctly, but the other links seem to be hidden. Does anyone have any insights o ...

htmlcssbootstrap-4navbar

Combining several btn-group and btn-group-vertical elements within each other

I am looking to create a button grid resembling a numpad for my project. I am utilizing angular and bootstrap 5 and thought of using btn-group and btn-group-vertical for this purpose. While this setup would work for a regular button grid, I need to have t ...

htmlcsstwitter-bootstrapbootstrap-5

The values in my JavaScript don't correspond to the values in my CSS

Is it possible to retrieve the display value (display:none; or display:block;) of a div with the ID "navmenu" using JavaScript? I have encountered an issue where I can successfully read the style values when they are set within the same HTML file, but not ...

javascripthtmlcss

"Changing the location of the suffix icon in an ant datepicker: step-by-step

Is there a way to relocate the calendar icon without using flex-flow:row-reverse? I'm open to exploring alternative methods. ...

cssreactjsantdant-design-pro

Generate a new style element, establish various classes, and append a class to the element

Is there a more efficient solution available? $("<style>") .attr("type", "text/css") .prependTo("head") .append(".bor {border:2px dotted red} .gto {padding:10px; font-size:medium}"); $("input:text").addClass("bor gto").val("Enter your t ...

javascriptjquerycss

What is the reason behind Bootstrap's varying column spacing based on the number of columns?

<br> <h6> This particular row/display consists of two elements. It is interesting to note that even with col-md-4, it expands to occupy more than 2/3 of the total width. </h6> <div class="flex-row"> <div class="card-deck"&g ...

htmltwitter-bootstrapbootstrap-4

I'm having trouble with my dropdown navigation menus - they keep popping back up and I can't seem to access

My website is currently in development and can be accessed at: The top navigation bar on the homepage functions properly across all browsers. However, there are three sections with dropdown submenus - About Us, Training, and Careers. These dropdown submen ...

javascriptphphtmlcss

Tips for incorporating captions into a slideshow

I've been experimenting with different methods to include captions in my slideshow, but haven't had much success. I simply want to add a div at the bottom of each image. Do I need to modify my script or should I consider adding something else? H ...

jqueryhtmlcss

Issue with background/hero video not adjusting its size

I've been experimenting with creating a page that features a video as the background, but no matter what I try, the video never seems to resize properly. The image below shows how it looks: image in question body { margin: 0; } .hero-se ...

htmlcss

What is the best approach to effectively manage right-to-left text-input fields?

I have been working on a project involving a multilingual layout. One concern that has arisen is: What is the proper way to handle text-input in this scenario? To better explain my issue, I created a JSFiddle. If I simply add the attribute dir="rtl", ...

htmlcsshebrewbidi

Using custom fonts with @font-face doesn't work in WordPress

I'm currently in the process of trying to incorporate custom fonts into a WordPress website, but I'm facing challenges getting the desired font to appear correctly. Interestingly enough, I've managed to successfully display the custom font l ...

htmlcsswordpressfontsfont-face

How can I make the Box div bigger or smaller?

My goal is to expand and collapse the slider div only for the box where the user clicks. I have achieved this functionality, but a problem arises when I click "read more" - all the boxes expand, which is not the desired behavior. I want only the specific b ...

javascripthtmlcssbootstrap-4

Organize and eliminate items within a vessel

Looking to manipulate a container with span elements by removing two and re-arranging one. I attempted the following approach: $('span.class5').insertBefore('span.class0'); However, this inserted each span.class5 into every repeating ...

javascriptjqueryhtmlcss

How can you determine whether the CSS of a <div> is defined in a class or an id using JavaScript/jQuery?

Hey there, I'm currently working on dynamically changing the CSS of a website. Let's say we have a div like this: <div id="fooid" class="fooclass" ></div> The div has a class "fooclass" and an ID "fooid", and we're getting its ...

javascriptjqueryhtmlcss

I need the links to open up the content area on the website in HTML

Is it possible to have a fixed header that does not disappear when clicking links from the navigation bar? I tried dividing the page into tables to achieve this. Now, I want to open the links in the navigation bar in the right column (the main content col ...

phphtmlcss