Responsive design for images in CSS

I've been attempting to modify these design elements.

You can see the issue on this page: 

http://69.195.124.215/~vtiffcom/about-vtiff/
.

There is a container for my logo and another one for the subhead. The logo acts as the icon, while the subhead contains the text "Vermont International Film Festival".

Currently, when the browser window size is adjusted, the subhead moves below the logo and then begins resizing according to the width of the browser. I would like it to resize first before moving below the logo.

I understand that the next step involves applying styles in a media query, but how can I make it resize prior to reaching the point where the media query applies?

I have tried various combinations of width, max-width, and height properties, but so far I haven't been able to achieve the desired effect of having the subhead resize before dropping below the logo.

Appreciate any help you can provide!

cssresponsive-design

Answer №1

To achieve the desired layout, remove the float settings for both elements and replace them with display: inline-block; for container2. Set its width to about 60% or adjust as needed. These changes should provide the visual result you are looking for. Enjoy! :)

Answer №2

Feel free to check out my demonstration on CodePen: http://codepen.io/username/abcdef/

In the example, I used a different method by setting the width of the parent elements of the image in percentage instead of using max-width. Your initial idea of img { max-width:100%; } was correct though!

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

Switch from hover effects to CSS3 animations triggered on page load

I found this code snippet on https://codepen.io/chriscoyier/pen/NWNJpdJ. Can someone help me modify it to change the counter on page load instead of hover? Also, I want the counter to stop at 100 without resetting back to 0. @property --num { syntax: ...

htmlcss

Adjust the color of the text in Ionic based on the condition

My current solution involves highlighting text in a small slider after a user tap, but it feels very makeshift. <ion-slide *ngFor="let loopValue of values"> <div *ngIf="viewValue == loopValue"> <b> {{loopValue}} </b> ...

cssangularionic-frameworkionic3

Designing clean layouts with HTML and CSS by incorporating negative space

Is it possible for the body text to seamlessly fill the available white space next to the heading text, as depicted in the image? Your feedback on this would be greatly appreciated. .column { display: inline-block; column-count: 3; text-align: ju ...

htmlcss

Styling a table based on specific conditions using Angular and JavaScript

I am trying to conditionally style the text in the table based on the time elapsed since the last ping. Specifically, I want to change the color of the text from green to red once 5 minutes have passed and vice versa. <form name="myform" data-ng-submit ...

javascripthtmlcssjsonangularjs

Alignment issue: table-cell elements are not lining up correctly

Curious as to why the containers on this page seem misaligned. Any assistance would be greatly appreciated. Thank you. http://codepen.io/anon/pen/jpmtz ...

htmlcss

Applying toggle() using css to manipulate various elements at once

Is there a way to toggle multiple divs of varying heights, all with the same class? What is the most effective approach to achieve this? http://jsfiddle.net/hS6RH/41/ $('.smallify').on('click', function() { if ($(this).parent(&apo ...

jquerycss

Rows that intersect - Challenging to articulate - Bootstrap 3

I'm at a loss for words when trying to describe what I'm attempting without simply showing you a picture: The issue I'm encountering is that the search box's height isn't fixed, and I might want to include other elements on the le ...

htmlcsstwitter-bootstrap-3

Customize the first link of Wordpress paginate_links

I customized the URLs for paginate_links to: echo paginate_links(array('format' => 'page/%#%/#news')); This way, when a user clicks on a link, they will be directed back to the blog section instead of being taken to the top of the w ...

phphtmlcsswordpress

Changing the appearance of the navigation bar from a horizontal list to a vertical list for the mobile version of a website - bullets are not displaying

I am in the process of creating a mobile-friendly version of a website, and in order to achieve this, I need to switch a navbar from a display:inline-style list to a bulleted list. Below are the HTML and CSS files for a simplified version of this: ul li ...

htmlcsshtml-lists

Creating a Bootstrap dropdown button that responds to different screen sizes

I have implemented the following Bootstrap code for a drop-down button. The dropdown functionality works fine, but it is not responsive on mobile devices. Can someone help me with making it responsive? <div class=" col-sm-4 col-xs-6"> <div ...

htmlcssbootstrap-4

Alignment issue with numeric and symbols in RTL format

I encountered a problem with RTL Alignment involving numeric, symbols, and English characters within an Arabic sentence. I have attached my screen below. In the image, the pink color indicates Arabic text, while the green border represents the English ver ...

phphtmlcss

The elements within the "ng-repeat" directive are not appearing as expected

My application makes a get request using Angular's http service and then loops over the returned data to display an unordered list in the view. However, I am facing an issue where the data is available after the get request but is not being displayed ...

javascriptjquerycssangularjstwitter-bootstrap

Bootstrap along with ROR 3.2.21 has a malfunctioning navbar

I am facing an issue with the Home section in the navbar. It used to work perfectly, but suddenly it stopped displaying as intended. I have checked and confirmed that both boostrap.min.js and boostrap.min.css are loaded properly. I have included boo ...

cssruby-on-railsrubyruby-on-rails-3twitter-bootstrap

Is there additional cushioning beneath an image within a div element?

It appears that my div containing an image has extra padding at the bottom for some unknown reason. You can view the JSFiddle here: http://jsfiddle.net/KSs7V/ Any suggestions on how this padding might have been added and how to correct it? CSS: .artist ...

htmlcss

How to Override Global CSS in a Freshly Created Angular Component

My CSS skills are a bit rusty and I need some assistance with a project I'm working on. The project includes multiple global CSS files that have properties defined for different tags, such as .btn. However, these global CSS files are causing conflicts ...

htmlcssangulartypescript

The menu positioned beneath the logo is malfunctioning

Upon downloading a template from the internet, I created a menu at the top with the logo positioned below it. However, when scrolling down, the menu items were supposed to turn black with a white background, resembling this: https://i.sstatic.net/1HTLZ.jp ...

csshtmlnavigationbar

Arranging the columns in bootstrap 4 for optimal display on mobile devices

Ensuring my columns and rows are aligned to the same height and position is essential. I have successfully achieved this in desktop view, but I am encountering challenges when it comes to mobile view. I have included 3 images for reference. The first depi ...

htmlcssbootstrap-4

Achieve a straightened appearance for background images within a skewed container

Can I un-skew the content inside a skewed carousel, while preserving the diagonal effect on the slide container? Check out the Jsfiddle example here - https://jsfiddle.net/czcjt3no/1/ <div class="section"> <div class="grid poly--holder"> ...

jqueryhtmlcssskew

Overlap with upper picture formatting

I've been struggling to create an ion-card with two images: a main picture and a small book cover. Any ideas on how to achieve this? Note: The layout should have 2 images, one at the top and another as a small book cover. Check out this sample on St ...

cssangulartypescriptsassionic3

Animate a div to show after another with CSS

Is there a way to display 3 divs consecutively using only CSS3 in a loop? The sequence should be: first div without delay, followed by the second div, and then the third: This is my attempt so far: .text1 { animation-duration: 3s; ...

htmlcssanimationcss-animations