What is the best way to keep the position of divs fixed when resizing the page?

I am currently designing a layout for a Tic Tac Toe game and I want the square blocks to remain in the same position even when the screen size is adjusted.

The tools I am using are Bootstrap 4 and SCSS.

1) How can I ensure that the square blocks stay fixed in the same position regardless of the screen size?

2) If the screen size is reduced, how can I resize all the elements inside the game-wrapper div according to the screen size?

codepen link : https://codepen.io/Jaunbruns/pen/pwXaRP?editors=1100

HTML:

.block {
  background-color: lightBlue;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  position: relative;
  &:hover {
    background: red;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="container">
  <div class="game-wrap">

    <div class="row">
      <div class="block"> </div>
      <div class="block"> </div>
      <div class="block"> </div>
    </div>

    <div class="row">
      <div class="block"> </div>
      <div class="block"> </div>
      <div class="block"> </div>
    </div>

    <div class="row">
      <div class="block"> </div>
      <div class="block"> </div>
      <div class="block"> </div>
    </div>

  </div>
</div>

Answer №1

It is recommended to utilize: pixel dimensions and em-based sizes with responsive design techniques.

For elements with static placement, use pixels; for elements on smaller screens, opt for em-based 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

Dealing with the problem of delayed image loading in AngularJS due to a setTimeout conflict

The issue: Upon page load, some images are still processing and not displaying (even though the image URLs are known). The resolution: To address this problem, a customized directive was developed to showcase a loading spinner as a placeholder until the i ...

Creating a perfectly centered square canvas on your screen

In the game I'm developing, I need to position a canvas at the center of the screen. The canvas should have equal width and height, covering the entire screen without overflowing, essentially creating a square shape. Is there a way to achieve this us ...

Ways to determine the number of overlapping elements and adjust their widths

My layout conundrum involves 3 buttons within a flexbox placed in a single table cell. I am trying to adjust the width of each button so that they collectively fill the horizontal space as much as possible. The issue arises when the buttons overlap and the ...

Alignment issue with Bootstrap's vertical radio buttons

When the screen size reaches 768px for mobile phones, I am experiencing an issue with stacking radio buttons. I have a local @media override that sets the radio-inline display to block, but it causes the first Radio Button "0" to be slightly offset and n ...

stream a song with a font awesome symbol

Can an audio track be played using a font awesome icon, such as displaying the song name (mp3) with a play icon right next to it? When users click on the play icon, can the track start playing and be paused or stopped at will? The list will consist of app ...

Why is my Bootstrap table failing to be responsive?

I'm currently using Bootstrap 4 to incorporate a table into my website and encountering difficulties in making it responsive on mobile phones. Unfortunately, when viewing the table on a phone, it appears very zoomed out and not user-friendly. Can anyo ...

trouble with padding on cards using vue-bootstrap

I have been working on creating a card component with Vue Bootstrap, but I've run into an issue. The card header and body seem to have excessive padding around them. If I remove the b-card element and only use b-card-header and b-card-body, it looks l ...

Is your sticky sidebar getting in the way of your footer?

I've developed a custom sticky sidebar for displaying ads, but I'm facing an issue. When I scroll to the bottom of the page, it overlaps with the footer. Can someone please take a look at this? - var stickySidebar = $('.sticky'); if ...

Tips for Embedding External JavaScript and URLs in Joomla Protostar Template

I'm interested in incorporating a hamburger menu into my Joomla protostar template, similar to the one featured on this URL: ['https://codepen.io/PaulVanO/pen/GgGeyE'] This will provide me with a fullscreen hamburger menu for both desktop ...

Developing a form using jQuery/ajax

Is there a way to update the Contact Us form in Div without redirecting to another thank you page after submission? I want to replace the contact form in that Div with a "Thank You" message upon successful validation. Any suggestions or demo/download code ...

Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation. Most of the menu and animation are functional at this po ...

Align the text to the center within the Paper component using React and Material-ui

I've been struggling to center text inside a paper component in Material UI, and nothing seems to be working. I attempted using display:flex in the parent component with align-items:center in the child component. I also tried adding padding:5px for eq ...

Captivating Images accompanied by Descriptive Captions

I was wondering if there is a straightforward method using only CSS and HTML to address this particular issue. I am in the process of creating a marquee that displays images within a fixed-width div. The number of images exceeds the capacity of the div, ...

What is the best way to ensure that Bootstrap 4 utilizes the full width of the screen?

Currently, I have integrated Bootstrap 4 into my project with the following viewport configuration: <meta name="viewport" content="width=device-width, initial-scale=1"> While everything displays and scales properly on different devices, I noticed a ...

Error encountered on Facebook Like button: The large button is failing to show the total number of likes received

Despite functioning flawlessly for months, the large Facebook Like button has suddenly stopped showing the number of "Likes". Strangely, the compact version is still working fine, but the larger button is concealing the count. I am using a Mac and have obs ...

How can I access an InputStream from a local XML file in a PhoneGap application?

Looking for advice on how to fetch an inputstream from a local XML file using JavaScript in my PhoneGap application. I'm new to JavaScript, so any guidance would be appreciated! ...

What is the best way to target outer elements only using CSS selectors?

Having trouble with a CSS selector: $("td.cv-table-panel-element") This selector returns a list of elements, shown in the screenshot linked below: https://i.stack.imgur.com/RoVMj.png Each element represents a column in a table with unique content. The ...

Issue with the JQuery FadeIn effect on my website when a div is repositioned for visibility

I have been working on revamping an existing website at www.gjelavoie.com. To enhance the user experience, I decided to use jquery fadein() and fadeout() functions for displaying my Contact form without visitors having to temporarily access the main page. ...

Ensuring that two operators are not consecutively placed in a Javascript calculator-validation guide

After creating a basic calculator using HTML, CSS, and JavaScript, I encountered an issue. When validating user input, the calculator currently accepts multiple operators in a row. To address this, I attempted to prevent consecutive operators by checking ...

Include various categories into the div containers of the listed items within the query outcomes

Is there a way to customize div styles based on query results? I want to differentiate the styles of divs in the result list based on their content. For example: I'd like bird names in the result list to have different div styles compared to other a ...