Center the Div element while keeping it responsive

I am currently working on my personal portfolio website and I am trying to center and align a circular shape that I have animated using CSS. I want to make sure that it remains responsive as well.

So far, I have attempted to use flexbox. Here is the code that I have used:

:root {
  --background: #005;
  --primary: #88D5BF;
  --secondary: #5D6BF8;
  --third: #e27fcb;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f00b55;
  display: flex;
  align-items: center;
}

.main-logo {
  width: 90px;
}

h1 {
  color: white;
  font-size: 20vmin;
  line-height: 1;
  font-family: ivypresto-display, serif;
  font-weight: 400;
  font-style: normal;
  padding-left: 40px;
  text-align: center;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
  margin-top: 50px;
}

.blob {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  animation: morph 8s ease-in-out infinite;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  height: 500px;
  transition: all 1s ease-in-out;
  width: 500px;
  transform-origin: 50% 50%;
  z-index: -1;
  @keyframes morph {
    0% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
    }
    50% {
      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
      background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
    }
    100% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
    }
  }
}
<!-- Header-->
<header>
  <div class="blob">
  </div>
  <h1>Abbie is a<br>graduate UX/UI designer</h1>
</header>

View my example on CodePen

htmlcssresponsive-design

Answer №1

If the blob element is located within the header, ensure that the width of the blob is set to 500px. It's important to consider different device breakpoints, for instance, the iPhone X with a width of 375px and the iPad Pro with a width of 1024px.

To accommodate these breakpoints, create specific media queries. For example, for an iPhone device, the class "blob" should have a height of 350px instead of 500px.

For more information on media queries and their implementation, you can refer to W3's comprehensive guide at the following link: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Keep in mind that you may need to target specific elements within the blob, such as text, using the same media query.

Answer №2

It seems like what you're trying to achieve is centering the blue blob with the text overlay in the middle. John already mentioned the solution in the previous answer. To achieve this, you'll need to adjust the height, width, and position of the blob using media queries. If you want to change the position of the blob, simply modify the following code:

    .blob {
      left: 0;  
      right: 20%; <--- move it more to the left
    }


:root {
    --background: #005;
    --primary: #88D5BF;
    --secondary: #5D6BF8;
    --third: #e27fcb;
}
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f00b55;
}
h1 {
  color: white;
  font-size: 20vmin;
  line-height: 1;
  font-family: ivypresto-display, serif;
  font-weight: 400;
  font-style: normal;
  padding-left: 40px;
  text-align: center;
}
header{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
  margin-top: 50px;
}
.blob {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 20%;
  text-align: center;
  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  animation: morph 8s ease-in-out infinite;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  height: 500px;
  transition: all 1s ease-in-out;
  width: 500px;
  transform-origin: 50% 50%;
  z-index: -1;       
@keyframes morph {
    0% {
              border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
              background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
      } 
      50% {
              border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
              background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
      }
      100% {
          border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
          background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
      } 
  }
}
    <!-- Header-->
    <header>
      <div class="blob">
          </div>
          <h1>Abbie is a<br>graduate UX/UI designer</h1>
        </header>

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

Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

As a .NET developer, I tuned in to the keynote for the Build Event in Anaheim, California and had some questions regarding the new support for creating Windows 8 applications using JavaScript, HTML5, and CSS3. They showcased several examples and mentioned ...

javascripthtmlcsscross-platformwindows-8

Analyzing text with improperly defined attributes

As I attempted to analyze an HTML document as XML by adding the XML start at the beginning, I encountered an issue with attributes within tags. <tr> <td class="yfnc_tabledata1" nowrap align="right">Jun 4, 2013</td> <td class="yfnc_tab ...

htmlxmlxsltxml-parsing

In Visual Studio Code, beautification feature splits HTML attributes onto separate lines, improving readability and code organization. Unfortunately, the print width setting does not apply

I have done extensive research and tried numerous solutions, When using Angular and formatting HTML with Prettier, it appears quite messy as it wraps each attribute to a new line, for example: <button pButton class="btn" ...

javascripthtmlangularframeworksprettier

Tips for setting a default value in a Reactive Form

How can I transfer a default value from HTML to TypeScript using reactive forms? <ul class="list list_2"> <li>Subtotal <span>{{cartTotal | currency:'INR':true:'2.0'}}</span></li> <li>Shippin ...

htmlangularangular8angular-reactive-formsdefault-value

Get rid of the animation that appears at the beginning and end

I have a unique CSS animation of a Pacman character, but I want to customize it so that the mouth remains open at all times instead of having the opening and closing animation. How can I achieve this? .loader{position:absolute;top:50%;left:50%;height:60 ...

htmlcssanimation

How to horizontally center a div between two floated elements

Check out this JSFiddle example. I'm facing a challenge in horizontally centering the div class="filter-group" between two floated buttons within the given example. I've tried various methods but haven't been successful so far. Any assistan ...

htmlcsstwitter-bootstrap-3

What is the best way to access the inner html of every cell within a table row that I have selected?

I want to implement a feature on my website where users can click a "save" button on a specific row in a table and save the entire row's innerHtml onto another page as their favorite hiking trails. I've been trying to achieve this by adding clic ...

javascripthtml

Issue encountered while submitting form on JQuery Mobile framework

Currently, I am in the process of developing a small web application utilizing JQuery Mobile and Multi Page architecture. The issue arises on my form as the second page. Upon clicking the submit button, an error message is displayed on my console (error i ...

javascriptjqueryhtml

When I try to host my Jekyll site on GitHub Pages using my custom domain, the CSS doesn't seem to be rendering at all

Everything looks perfect when I test my site on local host, but once I push it to my GitHub repo, only the HTML appears with no CSS or JavaScript. I've attempted changing my URL in the config.yml file to https://chanvrequebec.com and modifying href="/ ...

htmlcssgithubjekyllgithub-pages

JavaScript for creating dropdown menus using Twitter Bootstrap

I've been struggling to get the dropdown menus in my Twitter Bootstrap project to function properly. Below is the code I have for the navbar: <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> < ...

javascripthtmltwitter-bootstrapdrop-down-menu

Automatically setting the navbar to expand on medium devices

I am facing an issue while styling my navbar with BS5 installed. I have noticed that the className navbar-expand-md is being assigned, even though I have specified navbar-expand-custom in my code. navbar = _dbc.Navbar( [ _dbc.C ...

pythoncssbootstrap-5plotly-dash

Make sure to specify the max width of the Bootstrap container class to 940 pixels

Currently, I am utilizing Bootstrap 4 with the default container width on my desktop screen. For the main content section of my application, I would like it to be contained within a maximum width of 940px on larger screens. Should I override the existing ...

csstwitter-bootstrapbootstrap-4

Using a SASS watcher to keep an eye on every folder and compile them into a single CSS

I'm interested in setting up a folder structure like this: assets - scss - folder file.scss anotherfile.scss anotherfile.scss anotherfile.scss - anotherfolder file.scss anotherfile.scss anotherfile.scss ...

cssnpmsasswatch

Ways to handle <select> change events effectively in materialize css

My attempt at using a basic jquery change listener on a materialize css select dropdown has been unsuccessful. $("#somedropdown").change(function() { alert("Element Changed"); }); 1) Can anyone provide guidance on how to add a listener to ...

javascriptjquerycssmaterialize

The dynamic links in Knockout.js are unresponsive to clicks

I've been working on a new project that utilizes knockout js. The main issue I'm facing is with setting up a table to display images and information from a form, being stored in an observable array. Each image is wrapped in an anchor tag, and the ...

javascriptjqueryhtmlcssknockout.js

When using a CSS background image in ReactJS, a white space may appear at the bottom of the window

Currently, I am working on creating a background for a React website and implementing it in the div above component. My purpose is to have this background only appear on specific components and not throughout the entire website. However, I am encountering ...

cssreactjsbackground-imageresponsive-images

What measures can be taken to keep the rightmost element from moving when hovered over?

While I am generally happy with the layout, there seems to be a slight jump to the left when hovering over the right-most image (you need to click "show images" to view them). Strangely, this issue does not occur with the last row of images. Any suggestion ...

javascriptjqueryhtmlcss

What could be causing the Bootstrap ProgressBar to not show up?

Having an issue with the ProgressBar component from react-bootstrap: <ProgressBar now={dynamicValue} /> The value dynamicValue changes for each component. However, I am unable to get the progressBar to display in my case. ...

cssreactjsbootstrap-4progress-barreact-bootstrap

Creating unique CSS classes for custom forms in Web2py

What is the best way to assign a custom web2py form's class? for example: {{=form.custom.begin}} Image name: <div>{{=form.custom.widget.name}}</div> Image file: <div>{{=form.custom.widget.file}}</div> Click here to upload: {{= ...

pythoncssweb2py

Understanding the usage of jQuery transitionend to prevent interruptions in CSS animations

I found a similar thread on StackOverflow but I'm struggling to apply it in my current scenario. The Setup (Welcome Ideas) I've developed a jQuery slider that will have multiple instances on one page, each containing an unknown number of childr ...

jquerycsscss-animations