Ensuring elements are properly centered within a Bootstrap grid while adjusting the window size

I've been facing a challenge with making my web page resizable. Even though I managed to center the elements using margin properties, whenever I try resizing the browser window, the logo and ship images lose their positions. They end up falling out of place, eventually stacking on top of each other in rows when the window becomes really small.

This issue occurs on a 15.6-inch screen when it is in full size. [![full size][1]][1]

Here is what happens when the window is resized:

[!resized][2]][2]

However, everything looks fine when the window is resized to its minimum width: [![min-width][3]][3]

I want to avoid the problem shown in the second picture while ensuring that the design works for both full-sized windows and minimum width windows. I have always struggled with positioning elements correctly based on different window sizes, and I hope to master this skill once and for all through this project.

cssbootstrap-4resize

Answer №1

Resolved my issue by using the following CSS for displaying ship images:

max-width: 100%;
height: auto;
width: auto\9; /* specifically for Internet Explorer 8 */

Answer №2

It would be great if you could share the code you've already worked on for this task. It seems like you'll need three different containers here - one for the image of the first ship, another for the Battleship Logo and form container, and the third one for the ship container. If you're using Bootstrap, your code might look something like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
    <div class="row">
      <div class="first_ship col-sm-12 col-md-4 text-center">
        <img src="http://www.vache.me/dobule/img/favorites_3.jpg" alt="Ship Image">
      </div>
      <div class="battleshipLogin col-sm-12 col-md-4">
        <div class="text-center">Battleship</div>
        <div class="form_container text-center">
          <input type="text">
          <input type="text">
        </div>
      </div>
      <div class="second_ship col-sm-12 col-md-4 text-center">
        <img src="http://www.vache.me/dobule/img/favorites_3.jpg" alt="Ship Image">
      </div>
    </div>
</div>

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

Align two separate unordered lists together in the center

Would it be possible to align two separate UL elements next to each other horizontally? Here is the code that I am currently working with: <div id="container"> <ul id="list1"> <li></li> <li></li> ...

htmlcsshtml-listscentering

Is it feasible to apply Bootstrap 4 Columns float style similar to Bootstrap 3?

After starting development with Bootstrap 4, I encountered a common problem related to the difference between using the Bootstrap 3 column system and the new Bootstrap 4 flex system. In Bootstrap 3, we could easily insert multiple columns inside a row and ...

css-floatmultiple-columnsbootstrap-4dynamic-columns

Creating an interactive star rating system with JSON data

Currently, I am in the process of developing a star rating system specifically designed for restaurant reviews. The 'Attributes' displayed on the user interface are dynamic and fetched in JSON format. There exist five attributes with each having ...

javascriptjqueryhtmlcss

Resolving the Blank Space Problem in DataTable CSS Styling

I encountered an unusual issue while working with DataTable in my project. Here's a link to view my DataTable example I have also attached a picture illustrating the problem I am facing. Is there a way to remove the blank space containing filter but ...

jqueryhtmlcssdatatable

Updating Parent Component Modal Properties Using Another Child Component - ReactJS

Greetings, I must mention that my knowledge of React is still in its early stages. Despite searching extensively on the internet for a solution to this particular issue, I have not been able to find one that fits perfectly, hence why I am reaching out here ...

reactjsbootstrap-4

Changes in bottom position when scrolling in landscape mode on iOS Safari

I'm currently using ReactJS and have implemented a mobile menu bar with CSS properties position: fixed and bottom: 0. The menu bar stays locked at the bottom of the page in both portrait and landscape orientations on all browsers except for Safari. I ...

cssreactjsscrollcss-positionmobile-safari

Is there a way to prevent the contents of my div from overflowing beyond my other div?

Hey there! I'm fairly new to this whole web design thing, only a few months in. Currently, I'm in the process of creating a website for my school. However, I've hit a bit of a snag with different div containers holding various parts of my ...

htmlcssalignment

How to apply CSS classes to dynamically injected HTML in Angular 7

One of the challenges I'm currently facing is how to assign a CSS class based on a calculation in my component. Here's a snippet from my component class: @Component({ selector: 'app-render-json', template: `<div [innerHtml ...

cssangularangular7

Ways to perfectly position a bootstrap well in the center

https://i.sstatic.net/b3g46.pnghttps://i.sstatic.net/osPzb.png Having trouble aligning this image with the center of the page. It should be a straightforward task, but for some reason, I can't seem to get it right. ...

csstwitter-bootstrap

Don't forget to update the CSS stylesheet whenever templates are rendered in Flask

I have developed a Flask application using HTML and external (static) CSS stylesheets. One interesting feature of the application is a checkbox that uses JavaScript to toggle between two different CSS stylesheets - one for light mode and one for dark mode. ...

pythoncssflaskjinja2

Experiencing odd behavior with my Dash App when using CSS grid on it

Seeking assistance with my coding issue, I believe sharing my code from Github would be the most efficient way to address it. An exclusive branch named css_problem_branch has been created to showcase the problem at hand. To access the Github repository, p ...

pythoncssdashboardplotly-dash

Form-linked Progress Bar

This is a little project I created (for fun and learning purposes, even though it may not be the most optimized solution). If you're interested, here's the link to the code: https://codepen.io/paschos/pen/xxGXMQb I'm currently seeking assi ...

javascripthtmlcssreactjs

Managing the vertical positioning of grid items: tips and tricks

Is there a way to make the hexagons in my grid responsive to the layout, so that their height and width remain fixed relative to their container? Currently, they are overflowing from the grid container as shown in this jsfiddle: https://jsfiddle.net/gv5wc1 ...

htmlcsscss-grid

Do you think there might be an issue with the CSS coding?

I have designed a user-friendly responsive login form that allows users to easily log in and reset their passwords. However, I am facing an issue where the username and password fields are not displaying on separate lines as intended. I have thoroughly ins ...

htmlcssforms

confirmation box for deleting a row in a grid view

I am looking to enhance the delete confirmation box on my Gridview delete function. Currently, I am using a basic Internet Explorer box for confirmation but I want to display a more stylish confirmation box. Here is the JavaScript code snippet within my gr ...

javascriptcssasp.net

Incorporate my personalized CSS file into the Bootstrap 4 development tools

Is it possible to customize Bootstrap 4 variables with build tools as outlined in this guide? I am wondering how I can create a separate CSS file named MyCustomStyles.css at the end of the build process by running npm build dist. I have created a _MyCusto ...

cssnpmbootstrap-4

Implement a vertical scrolling animation in datatables

I am trying to utilize datatables to display all data. My goal is to have the data automatically scroll row by row every 3 seconds. This is my code, and you can also check it out on jsfiddle The intention is to showcase this data on a large screen. < ...

javascriptjqueryhtmlcssdatatables

This is an alignment of the background image ('relative') to the right side

I am facing an issue with the header section of my website. The background-image is styled using the following CSS: .header { position: relative; min-height: 436px; background: url("../img/holland-canal.jpg") no-repeat; background-size: co ...

cssresponsive-design

My webpage lacks responsiveness

I've recently put together an HTML page, but unfortunately, it's not responsive. My Code <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ...

htmlcss

Adjusting jQuery Button Width with input type of "button"

Currently, I am working with jQuery Mobile to develop a straightforward Golf Score Card App. To calculate the total at the end of a form submission, I've implemented the following code. <input id="total" type="text" name="total" value="" readonly= ...

jqueryhtmlcssinputsize