Screen size impact on positioning

Before I delve into the issue I'm facing, I want to emphasize that despite searching for existing solutions, I have not been able to find one that works. This problem has been blocking me for a week now, and I am in desperate need of assistance. The issue at hand is related to creating a website that works perfectly on my screen resolution but goes haywire on other screens. The elements seem to overlap and behave strangely. Here is the snippet of my code:

@font-face {
    font-family: Comfortaa;
    src: url(Comfortaa-Regular.ttf);
}
@font-face
{
font-family: Comfort;
src: url(ChampEtLimou.ttf);
}
body
{
 background-color : rgb(255,255,255);
}
.titre3
{
color : #0183c0;
font-family : Comfortaa;
position:  fixed;
font-size :50px;
z-index:10;
left : 43.2%;
top:-6%;

}
...
<!doctype html>
...
    body>

Any assistance provided is greatly appreciated!

Answer №1

Utilizing fixed positions is causing your issue. It would be beneficial to implement media queries for various screen sizes. Consider using Bootstrap or a similar framework with a grid system. Bootstrap offers grid systems tailored for xs, xm, md, xl, and other screen sizes. Additionally, you can selectively hide elements on smaller screens.

For instance, if we aim to display four divs next to each other on large screens, the layout should shift to three divs for medium screens.

<div class='container'>
  <div class='row'>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
  </div>
</div>

Visit the JSFiddle demo for a visualization.

For further details, refer to https://getbootstrap.com/docs/4.1/layout/overview/

Apologies for any language inaccuracies.

Answer №2

Redesigned the layout with placeholders to serve as a foundation for further development. Feel free to expand and enhance based on this structure.

Check out the preview on JS Fiddle: https://jsfiddle.net/b4vez5qx/

PLEASE NOTE: This layout is not responsive, it is designed as an elastic layout.

HTML

<header>
<div class="logo">logo</div>
  site title
  <div class="facebook">FaceBook</div>
</header>
<div class="main">
  <div>
    <div class="imgCont"><img src="via.placeholder.com/250x200/"> </div>
    <div class="headText">
      <h3>Heading</h3>
      <div>
        Dummy text Dummy text Dummy text Dummy text Dummy text
      </div>
    </div>
  </div>
</div>

CSS

*{margin:0; padding:0; font-family:arial}
header{border-bottom:1px solid blue; text-align:center; height:50px; background:#f4f4f4; padding:25px 10px 0 20px;}
header div{display:inline-block;}

.logo{float:left}
.facebook{float:right}
.sitetitle{}

.main{background:#0e1436; height:250px;}
.imgCont{padding:10px;float:left}
.imgCont img{border:8px solid #1b344b}

.headText{padding:10px; color:#fff;}

Hope you find this useful

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

Having trouble with compiling SCSS code

While diving into the world of SCSS, I decided to compile my SCSS into CSS using npm. So I entered npm run compile: sass as defined in my package.json as follows: "scripts": { "compile:sass": "node-sass sass/main.scss css/style ...

Modify the font style of the jQuery autocomplete box to customize the text appearance

Hello, I'm a beginner with jquery and currently experimenting with the autocomplete feature. I managed to change the font of the dropdown list successfully but struggling to do the same for the input field itself. Does anyone know how to achieve this ...

Adjust the Bootstrap Navbar by positioning one navigation item to the right side

I want to align the logout button to the right within my bootstrap navbar. https://i.stack.imgur.com/PDvSv.png Here is a demonstration of the current behavior: https://codepen.io/agrawalo/pen/mdbKYLX Code: <nav class="mb-1 navbar navbar-expand-sm na ...

Steps for creating a rubber compound with reduced elements

Sample Image Looking for a way to reduce the size of elements on a webpage without adapting them? I want the elements to shrink and align in a single column, and I will handle the adaptation myself. HTML: <!-- Trading --> <div class="main-co ...

What are the best ways to optimize and capitalize on functionality in Electron.js?

After creating three custom buttons for the close, maximize, and minimize functions in Electron.js, I encountered an issue. While the close button is functioning properly, I am struggling with implementing the maximize and minimize buttons. In fact, I have ...

What advantages does withStyles offer that surpasses makeStyles?

Is there a distinct purpose for each? At what point is it more suitable to utilize withStyles instead of makeStyles? ...

Tips for adjusting the button spacing on a bootstrap navbar

As someone who doesn't work on front-end tasks frequently, I have encountered an issue while creating a navbar using Bootstrap. The problem arises when trying to add multiple buttons as it causes the spacing between them to appear strange. Does anyon ...

The table populated by Ajax is blank

I am facing an issue while trying to display a table using AJAX and PHP. The table is not appearing in the designated div. Since I am new to AJAX, I have limited knowledge about its functionalities. Below is the HTML code for my div: <div class="body" ...

Tips for connecting elements at the same index

.buttons, .weChangeColor { width: 50%; height: 100%; float: left; } .weChangeColor p { background: red; border: 1px solid; } .toggleColor { background: green; } <div class="buttons"> <p><a href="#">FirstLink</a></ ...

api for enhancing images in Laravel app through preview, enlarge, and zoom functionalities

As I work on my website, I aim to display images in a compact space, such as within a 300x300 <div>. What I envision is the ability for users to preview or enlarge these images upon clicking, allowing for a closer and more detailed view. For exampl ...

Material UI button component does not have the applied class

I'm encountering an issue with applying a CSS class (redirectButton) to a Material UI button. Despite my efforts, the class is not being successfully applied. Below is the HTML code in question: {(isDataAdapterAdmin && !dataSources?.length) & ...

A helpful guide on displaying validation errors in a form using React JS

After creating a form and connecting it to the server, I encountered an issue with displaying validation errors below respective input fields. The error message response in case of validation error is as follows: "message": "ValidationError: confirmPasswor ...

I prefer to have the links activate when the mouse hovers over them, rather than when hovering over empty

Is there a way to prevent the bottom links (music, contact, archive) from being highlighted when the mouse hovers over the empty space between them and not just on the actual links themselves? I want the mouse to only react to the links it hovers over and ...

When the screen is minimized, my website doesn't align to the center as expected

When the screen is maximized everything looks great, but when I minimize it, the content doesn't center. I tried using margin: auto; in the "main-div" class, but then everything shifted to the top left corner. So, I added a "wrapper-div" to contain th ...

Placing text and an image within a grid cell does not automatically stack them on top of each other

I have a large div with a grid display, consisting of 3 rows and 2 columns. I am attempting to include text directly below the photo within each cell. This is what my code looks like: <div class="arrange-fixes"> ...

Having trouble adding a custom font with override to MuiCssBaseline in react-admin, the @global @font-face seems

I am attempting to integrate the NotoSansSC-Regular.otf font from Google into my react-admin application as the default font for simplified Chinese text. I have managed to make it work by including the fonts in the root HTML file using CSS, like this: ty ...

I have the ability to shift text 50 pixels to the left

My navigation bar is currently aligned to the left, but I'm looking to move the text 50px from the left. Is there a way to achieve this? .navigation { width: 100%; height:35px; background-color: #f1b500; /*f2c255*/ margin-top: 4.4em; } .navig ...

Run a Javascript function two seconds after initiating

My goal is to implement a delay in JavaScript using either setInterval or setTimeout, but I am facing an issue where the primary element is getting removed. Code that works fine without Javascript delay: const selectAllWithAttributeAdStatus = document. ...

The event handler is not being triggered when selecting the tag

Currently working on a project where I am utilizing vanilla HTML/CSS/JS. My goal is to hide all items on a page initially, set a default option in a select tag, display only the element with the selected ID, and allow the user to choose different time peri ...

stop cascading style sheets from being overwritten

In my ASP.NET web forms project, I am utilizing Telerik controls. The Problem In one instance, I need to retrieve HTML data from the database, which includes a lot of CSS, images, and HTML content. Here is an excerpt of my code: <telerik:RadLabel ...