"Customize the dimensions and scroll behavior of a division

I've been struggling to make a single-page site full-width, and I can't seem to get it right.

My goal is to create sections that are:

  • Full width
  • Background image full width
  • The height of the div should be at least the same as the image, adjusting if text overflows
  • Customizable text with margin/top properties

Currently, the site looks good except on mobile phones due to text overflow. 

.row {
    margin: 5px 0px;
}

    .row:first-of-type {
        margin-top: 0px;
    }

    .row:last-of-type {
        margin-bottom: 0px;
    }

    .row > div > div {
        position: absolute;
    }

    .row .padding-0 {
        padding: 0px;
    }


.row > div > div h1 {
    font-size: 1em;
    font-size: 10px;
    font-weight: bold;
}

...

@media (min-width:1200px) {
    .row#intro > div > div {
        bottom: 10%;
        left: 10%;
    }

...
<div id="intro" class="row">
        <div class="col-sm-12 padding-0">
            <img class="img img-responsive" src="http://teknologitalenter.dk/img/villiam.jpg" />
            <div>
                <h1>
                    Header
                </h1>
                <p>Sub header.</p>
            </div>
        </div>
    </div>

...

If anyone has any ideas on how I can achieve this layout, please let me know. I've done similar designs before, but I'm drawing a blank this time

htmlcss

Answer №1

I recently made some modifications to the CSS for the row and text-containing div. Let me know if I understood your question correctly.

.row {
    margin: 5px 0px;
}

    .row:first-of-type {
        margin-top: 0px;
    }

    .row:last-of-type {
        margin-bottom: 0px;
    }

    .row > div > div {
        position: absolute;
        top: 80px; 
        display: block;
        bottom: initial !important;
    }

    .row .padding-0 {
        padding: 0px;
        position: relative;
    }


.row > div > div h1 {
    font-size: 1em;
    font-weight: bold;
}

.row > div > div p, .row > div > div ul li  {
    font-size: 0.7em;
    font-weight: normal;
}

/* Small devices (tablets, 450px and up) */
@media (min-width:450px) {
    .row > div > div h1 {
        font-size: 1em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li{
        font-size: 0.7em;
        font-weight: normal;
    }
    blockquote footer {
        font-size: 0.5em;
    }
}
/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {
    .row > div > div h1 {
        font-size: 1em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li {
        font-size: 0.9em;
        font-weight: normal;
    }
    blockquote footer {
        font-size: 0.7em;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .row > div > div h1 {
        font-size: 1.6em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li {
        font-size: 1.2em;
        font-weight: normal;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .row > div > div h1 {
        font-size: 2em;
        font-weight: bold;
    }

    .row > div > div p, .row > div > div ul li {
        font-size: 1.4em;
        font-weight: normal;
    }
}

/* extra small devices (phones, 450px and down) */
@media (max-width:450px) {
    .row#intro > div > div {
        bottom: 10%;
        left: 10%;
    }

    .row#om > div > div {
        bottom: 3%;
        left: 10%;
        width: 70%;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 4px;
    }

    .row > div div p {
        font-size: 0.5em;
    }
}

/* Small devices (tablets, 450px and up) */
@media (min-width:450px) {
    .row#intro > div > div {
        bottom: 5%;
        left: 5%;
    }

    .row#om > div > div {
        bottom: 5%;
        left: 5%;
        width: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 4px;
    }
}
/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .row#intro > div > div {
        bottom: 10%;
        left: 10%;
    }

    .row#om > div > div {
        bottom: 10%;
        left: 10%;
        width: 50%;
        background-color: transparent;
        padding: 0px;
        color: black;
    }
}
<div id="intro" class="row">
        <div class="col-sm-12 padding-0">
            <img class="img img-responsive" src="http://teknologitalenter.dk/img/villiam.jpg" />
            <div>
                <h1>
                    Header
                </h1>
                <p>Sub header.</p>
            </div>
        </div>
    </div>
<div class="row" id="om">
        <div class="col-sm-12 padding-0">
            <img class="img img-responsive" src="http://teknologitalenter.dk/img/oculus.jpg" />
            <div>
                <p>
                    Section text
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis pulvinar nisi sed sagittis. Donec ultricies id leo a ultricies. Praesent nunc ex, commodo vel vestibulum mollis, pretium vel purus. Donec suscipit nulla est, interdum varius risus sollicitudin vel. Cras tortor neque, vehicula non massa in, iaculis scelerisque ipsum. Cras vel dignissim lorem. Morbi pellentesque orci nec nulla vehicula, ac condimentum lectus scelerisque. Sed dolor arcu, condimentum sagittis nisi quis, mollis convallis nunc. Mauris mollis, lacus non interdum faucibus, ligula leo faucibus mauris, nec sodales lectus nulla sit amet mauris. Sed non viverra lectus. Maecenas at fringilla felis.

In iaculis tellus eu felis placerat, et aliquet augue rutrum. Praesent lectus diam, blandit sed vehicula at, venenatis quis lorem. Nunc auctor pretium odio, ac rutrum diam ullamcorper ut. Proin vitae ornare magna. In sapien risus, dapibus id sagittis at, gravida et leo. Fusce lectus neque, mattis eget magna non, iaculis laoreet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel dapibus lacus, ut efficitur ligula. Nunc vel justo condimentum, ullamcorper erat ut, sollicitudin ante. Sed nec ornare sapien. Praesent non neque quam. Aenean eget justo sodales, vehicula ex sit amet, cursus nisl. Integer suscipit massa commodo, accumsan dol...

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

I am having trouble with my scroll reveal effects on JavaScript, how can I troubleshoot and fix the issue?

I'm currently making updates to my portfolio website, but for some reason, the scroll reveal animation has suddenly stopped working. I made a few edits and now it seems to be broken. /*===== SCROLL REVEAL ANIMATION =====*/ const sr = ScrollReveal({ ...

javascripthtmlcss

The application is experiencing issues with loading Django's CSS files properly

When working on my Django application, I've noticed that the CSS code being loaded differs from what is written in the files. What could be causing this discrepancy and how can it be fixed? ...

cssdjangodocker

Can you explain the purpose of the behavior: url(); property in CSS?

While browsing the web, I came across a CSS property that caught my eye. It's called behavior, and it looks like this: #element{ behavior: url(something.htc); } I've never used or seen this property before. It seems to be related to Internet ...

cssinternet-explorer

Consistent Gaps Among Any Number of Buttons

I have a scenario where I have multiple buttons arranged in different lines. Currently, when a button doesn't fit on a line, it moves to the next line leaving blank space behind. What I want is to evenly space out the buttons that manage to be on the ...

htmlcssbootstrap-5

Maintain course focus when updating

I'm currently working on a to-do list where clicking on an item adds the "checked" class. However, when I refresh the page, everything reverts back to its original state without the checked class. How can I maintain the state of the checked items? I& ...

javascriptphphtml

Troubleshooting the Ineffectiveness of the CSS Custom Property Url in Asp .Net

Working on styling some cards within an MVC project, I have a custom property in my CSS file called "--bg-img" which is defined as follows: background-image: linear-gradient(rgba(0, 0, 0, var(--bg-filter-opacity)), rgba(0, 0, 0, var(--bg-filter-opacity))) ...

cssasp.net-mvcasp.net-coreurlcss-variables

Java Spring - The on-page styling is out of control

Currently, I am in the process of developing a taxi web application using Java Spring. After successfully creating the website with the help of a template, I encountered an issue when trying to integrate the login functionality. Strangely, the styling on ...

javahtmlcssspringweb

Why isn't my axios login get request functioning as expected?

I am currently working on a login-page for a school project. I am using vue.js and have been attempting to make a get-request using axios. However, I am facing an issue where I cannot even enter the .then() block as the last thing displayed is alert(TEST1) ...

htmlvue.jsaxios

dividing Handlebars HTML content into different files or sections

I am looking to design a single route webpage, but I would like to divide the HTML code into multiple files. When rendering this particular route, my goal is for the rendered file to pull content from different template files and combine them into one coh ...

htmlnode.jsexpresshandlebars.js

Mistake while defining a global variable within an HTML file and utilizing it

In my HTML document, I have set a global variable like this: <script type="text/javascript"> var total; </script> However, when I try to use this variable, I encounter an error stating that it cannot be used in this context. To resolve this ...

htmlasp.net-mvc-4

How can I set a minimum height for a table on my website?

Is there a way to make a table that is at least 50px in size, but can still enlarge if there is a lot of text inside? I'm not sure if this even makes sense, but any help would be appreciated. Thank you! ...

css

Express and Node.js working together

Recently, I've been encountering an issue with my POST function. Whenever I click on the log in button, a message pops up saying: Cannot POST /login I'm at a loss here and would greatly appreciate any help you can provide \(^-^\) B ...

javascripthtmlnode.jsexpresspost

Customizing HTML list headers using an external JavaScript function

Hi everyone, I've been working on a login page and I want to enhance the user experience by displaying the logged-in user's username at the top of the screen, which can then trigger a dropdown list upon clicking. To achieve this, I've writt ...

javascriptjqueryhtml

Scrolling with JQuery Sortable will go up in the list, but it won't allow for

My current issue revolves around a problem in JSP, but for better understanding, I have replicated the issue using HTML. The main page involves using sortable to enable drag and drop rearrangement of elements (list items). However, the scrolling behavior i ...

htmljquery-uijspjquery-ui-sortable

There seems to be a compatibility issue between AngularJS and HTML

Here is a simple AngularJS code snippet I have written: var app=angular.module("myApp",[]); app.controller("MyController",['$scope',function($scope){ $scope.name="Asim"; $scope.f1=function(){ console.log("i am clicked"); $scope.vr="lol"; } co ...

javascripthtmlangularjsnode.js

How to attach input to function invocation in Angular 2

Can we connect the @Input() property of a child component to a parent component's function call like this: <navigation [hasNextCategory]="hasNextCategory()" [hasPreviousCategory]="hasPreviousCategory()" (nextClicked)="next ...

javascripthtmlcssangularjsangular

Issue with making a call to retrieve an image from a different directory in ReactJS

This is how it appears <img className='imgclass' src={"../" + require(aLc.value)} alt='' key={aLc.value} /> I am trying to create a path like ../m/b/image.jpg, where aLc.value contains the path /m/b/image.jpg. I need to add only ...

javascripthtmlcssreactjswebpack

Why does the container overflow when the child is floated in CSS?

Can you explain why a parent div element stops adjusting its height when its child is floated? Here is the HTML snippet: <!DOCTYPE html> <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="in ...

htmlcssuser-interface

Fading CSS Hover Popup Display and Hide

I am looking to create a CSS-only popup for an image that will appear when a user hovers over the image with their mouse. After researching on various platforms, such as this thread, I have developed the following solution: a.tooltip span { width: 250 ...

css

div maintain aspect ratio while scaling

My current layout is structured like this: HTML <div id="container"> <div id="zoomBox"> <div class="box"></div> <div class="box"></div> <div class= ...

javascriptjqueryhtmlcssinternet-explorer