What is the best way to ensure the logo remains aligned with the left side of the name and title?

I am looking to have the logo and name/title styled similar to the image below. Additionally, I want the logo to remain on the left side of the name/title when the display screen size is reduced (currently it moves above). Any suggestions would be greatly appreciated! Thank you!

https://i.sstatic.net/zcYuO.png

Below is my HTML Code:

<header>
    <div class="row">
        <div class="col-md-6">
            <figure>
                <img id = "title-logo" src="Images/Logo.png" width="100" height="100" class= "img-responsive" alt="Udacity_logo">
            </figure>
        </div>
        <section class="col-md-6 text-right text-uppercase">
            <h1 class="title-super text-thin">Jane Doette</h1>
            <h4>Front-end Ninja</h4>
        </section>
    </div>
</header>

And here is my CSS:

.title-super, .text-thin {
    font-size: 60px;
    color: #2d3c49;
    font-weight: 200;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.title-logo {
    margin-top: 20px;

}
htmlcsstwitter-bootstrap

Answer №1

Implement flexbox for a modern layout design:

header .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-super,
.text-thin {
  font-size: 60px;
  color: #2d3c49;
  font-weight: 200;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.title-logo {
  margin-top: 20px;
}
<header>
  <div class="row">
    <div class="col-md-6">
      <figure>
        <img id="title-logo" src="Images/Logo.png" width="100" height="100" class="img-responsive" alt="Udacity_logo">
      </figure>
    </div>
    <section class="col-md-6 text-right text-uppercase">
      <h1 class="title-super text-thin">Jane Doette</h1>
      <h4>Front-end Ninja</h4>
    </section>
  </div>
</header>

Answer №2

Make sure to include the appropriate class for smaller screens

<div class="col-lg-x col-md-x col-xs-x">
 <figure>
   <img id="title-logo" src="Images/Logo.png" width="100" height="100" class= "img-responsive" alt="Udacity_logo">
 </figure>
</div>

Remember to replace "x" with the correct column size. Refer to this link for more information: http://getbootstrap.com/css/#grid-options

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

JavaScript can be used to select and click on a specific li element using the :

I'm attempting to click on a specific link using a submit button. Essentially, I have a ul containing a large number of li elements, each with a link of class "episodeLink" inside, as shown on . I've added an input box where you can enter a num ...

javascriptjqueryhtml

Acquiring HTML form data using JavaScript

Although it may seem trivial, I'm facing a challenge. I have an HTML form that is dynamically generated by JavaScript and populated with initial data fetched from the server. The form is displayed correctly with the pre-filled data. My goal is to allo ...

javascriptjqueryhtmlforms

Conceal the year, month, and day within a datetime-local input

I am working with <input type="datetime-local" step="1"/> input fields, and I want users to only be able to edit the hours, minutes, or seconds. This is due to setting the minimum value using let min = new Date().setHours(0,0,0) and the maximum value ...

javascripthtmldatetimeinput

Attempting to create a multi-page slider using a combination of CSS and JavaScript

Looking for help with creating a slider effect that is triggered when navigating to page 2. Ideally, the div should expand with a width of 200% or similar. Any assistance would be greatly appreciated! http://jsfiddle.net/juxzg6fn/ <html> <head& ...

javascripthtmlcssslider

Showing a picture in Angular from a stored image on a node.js server

I'm curious about security measures. Let's say I've uploaded an image of an animal to the server, such as 1545419953137bear.jpg, which is stored in my backend uploads folder along with other images. On the frontend, I use an img element wit ...

javascripthtmlnode.jsangular

The CSS of the Sendgrid template is being overlooked

I have utilized Sendgrid to create the template mentioned below: https://i.sstatic.net/TFQfl.png In order to send this template using my Node server, I have developed the module provided in the code snippet: /* * Created by root on 6/6/16. */ var path ...

csssendgridemail-templates

Simultaneous display of icon and text on Bootstrap toggle button

Currently, I am utilizing Bootstrap 3 along with Jquery. Within my coding structure, there is a button that holds an icon within a span tag (specifically using the glyphicon provided by Bootstrap). <button id="swapArchived" class="btn btn-default btn-s ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Guide to activating text entry following selection of a related radio button in Bootstrap 4

I am currently utilizing Bootstrap 4 to create a mock item submission form for my web application. Within the transaction row, the text input field for price is initially disabled by default. What steps should I take in order to enable the text input field ...

javascripthtmlbootstrap-4disabled-input

Is it possible to modify the cursor for disabled <button> or <a> elements in Bootstrap 4?

Is there a way to apply the cursor: not-allowed style to a button or a element? I've attempted the following: .not-allowed { pointer-events: auto! important; cursor: not-allowed! important; } Here is an example of my button: <a class=" ...

cssbootstrap-4

Tips for hiding text on hover effect

I'm currently working on a menu where each item displays text that is replaced by an email address on hover. However, I am struggling to remove the text during the hover state. Below is the code I have written so far: #home { font: 30px 'Le ...

cssvisibilityhiddenfont-size

Displaying live data from a spreadsheet directly on a sidebar

My goal is to extract data from another sheet in the same spreadsheet and present it as a dropdown selection in the sidebar. The code.gs file contains a function called getVisualData() that successfully retrieves the desired list: function getVisualData() ...

javascripthtmlgoogle-apps-scriptgoogle-sheetstemplate-engine

The JavaScript Top Slide Down effect is malfunctioning

Every time I press the "More" button, I expect some forms to pop out but nothing happens. Can someone please assist me with this issue? <body> <!--Hero Image--> <div class="hero-image"> <div class="hero ...

javascripthtmlcssbootstrap-4

Adjust Vue FilePond dimensions

I am currently working with a Vue Filepond and trying to ensure that it fills the height of its container. My Vue Filepond setup also involves Vuetify. Whenever I attempt to set values in the CSS, they are constantly overridden by 76px. Although fill-hei ...

javascriptcssvue.jsfilepond

Using a Javascript while loop to iterate through an array and display the elements in the .innerHTML property

As a newcomer to Javascript, I am in the process of teaching myself. My current task is to develop a function that will display each element of the array AmericanCars with a space between them. I have successfully been able to show an individual element u ...

javascripthtmlwhile-loop

Count in JavaScript that picks up where it left off

I'm working on setting up a countdown timer that runs for 24 hours, showing the days, hours, minutes, and seconds. The challenge I'm facing is how to save the progress of the countdown. Essentially, I want it to resume from where it left off for ...

javascripthtmlcookiescountercountdown

Can someone please provide guidance on how to focus on these boxes? (see image below)

My goal is to specifically target the boxes with white dots inside them. Each black box in this picture represents a blog post, even including the larger one at the top. I initially considered using the nth-child selector, but I'm not confident in how ...

jquerycsscss-selectors

A basic webpage created using ASP.NET featuring simple HTML text

Is it acceptable to manually code HTML, such as <p>, <ul>/<li>, <h3>, <h4>, <blockquote> tags, into a Content Page that already has an existing Master Page? The content is similar to a blog post. Are there better desig ...

asp.nethtml

Can variables in JavaScript clash with input names in HTML?

I have the following code in an HTML file: <input type="..." name="myInput1" /> Then, in a JS file associated with this HTML file, I declare a variable to store the value of that input after it loses focus: var myInput1; Should I be concerned abo ...

javascripthtmldom

Utilizing Angular PrimeNG's range datepicker, you can select a date range spanning from January 31st to December 1st, 2023 within a reactive form. Take it a step further by calculating

Here is some HTML code: <div class="row"> <div class="col-4"> <p-calendar label="startDate" formControlName="startDate" [minDate]="daMaxRange" ...

javascripthtmlangulartypescriptdate-range

How can I make multiple elements change color when hovering with CSS?

Hey there! I have a little design challenge that I need help with. On my website (), I am trying to make multiple elements of a specific item change color when the user hovers over the text. If you hover over the "more" menu item, you'll notice that o ...

javascriptjqueryhtmlcsshover