list of images that adjust to fit various screen sizes

I recently delved into learning responsive web design, but I've encountered a small issue. My navigation menu consists of images with varying widths. Here's how it looks: http://jsfiddle.net/yxLLncpb/

When I use the same dimensions for all images, the resizing works smoothly as the window size changes.

However, when I assign individual sizes to each image like so:

ul li#home{width:7,53%;}
ul li#vermeldungen{width:18,59%;}
ul li#tup{width:20,83%;}
ul li#ug{width:22,59%;}
ul li#kirchen{width:8,79%;}

Sadly, now the images fail to resize along with the window. Can anyone shed some light on why this is happening?

htmlcssimagelistmenu

Answer №1

ul li#home{width:7.53%;}
ul li#vermeldungen{width:18.59%;}
ul li#tup{width:20.83%;}
ul li#ug{width:22.59%;}
ul li#kirchen{width:8.79%;}

You mistakenly used a comma instead of a dot 

<li id="kirchen"><img src="http://www.georgs-kirche.de/wordpress/wp-content/themes/georgtheme/images/nav_kirchen.png"></li>

You used class for the last item but it should be changed to id

Take a look at the working fiddle.

Answer №2

Check out the revised code snippet below:

ul li#home{
width:7.53%;
}

For more details, refer to the updated fiddle here:

http://jsfiddle.net/abc123xyz/4/

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

What is the best way to remove unnecessary space in a div when the content is smaller than the height, while still using overflow:auto?

HTML CODE <p>overflow:auto</p> <div class="auto">This code snippet will add a vertical scroll bar to the content within the div if it exceeds the height of the div. The background color is set to green, width and height are both 100px, ...

csshtmlheightoverflow

Displaying Populated Dropdown Menus from Remote Sources Using Vue.JS

Here is the UI I am trying to implement for better clarity. You can view it here. I have successfully managed to dynamically add and remove drop-down lists and text-boxes using the + and - buttons. However, I am facing an issue where selecting an item fro ...

javascripthtmlrestvue.jsdropdown

The Bootstrap 4 Toggler Dropdown lacks a background color

Struggling to style the toggle dropdown on smaller screens to match the regular navbar background? Can't seem to figure out how to target it. Is there a missing bootstrap class or an error in the code? Initially suspected the border might be causing i ...

htmlcssbootstrap-4

What is the best way to eliminate HTML tags from a PDF document?

Looking for help to strip HTML tags? I'm trying to get rid of the HTML tags in my PDF view. Check out the image below and please assist me with this task. This is the code I am using: $string1 = $_POST["editor1"]; $string1 = str_replace("<p>" ...

phphtmlpdf

How to properly position a YouTube video frame in the center?

<section> <h3>Find out about us</h3> <p>British Airways Virtual is a leading virtual airline within the Infinite Flight community. Boasting a community of over 50 pilots, we offer a vibrant and engaging experience. Come and ...

htmlcssiframe

Behavior of jQuery resizable when being used on elements can sometimes

A live demonstration showcasing unusual behavior can be found at: If you attempt to resize the window by grabbing the right border and adjusting it horizontally, the vertical alignment goes awry. This issue persists across all open windows accessed throug ...

javascriptjqueryhtmlangularjscss

What is the process for uploading a raw image with AJAX?

Looking for advice on the best way to upload a base64 encoded image from a mobile device's camera using PhoneGap to store it on a server. Any recommended approaches? Encountering Error 414 (Request-URI Too Large) when attempting to include the base64 ...

androidajaximagecordova

When scrubbing through videos, Chrome consistently throws a MEDIA_ERR_DECODE error

Encountering a MEDIA_ERR_DECODE error while scrubbing in Chrome on two different PCs. One PC runs Windows 7 with Chrome version 26, and the other runs Windows 8 with Chrome version 27. This issue occurs across all videos. When attempting to scrub on the v ...

htmlgoogle-chromevideovideo.js

Harvesting feedback from the Google Play Store app portal

import time from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys ...

pythonhtmlseleniumgoogle-playscreen-scraping

Improving User Experience with HTML Form Currency Field: Automatically Formatting Currency to 2 Decimal Places and Setting Maximum Length

Hello there, I am currently facing an issue with the currency auto-formatting in a deposit field on my form. The formatting adds 2 decimal places (for example, when a user types 2500, the field displays 25.00). However, the script I wrote does not seem to ...

javascriptjqueryhtml

Center alignment function is not functioning correctly

I'm struggling to center the text both vertically and horizontally inside my div. No matter what I try, I can only get it to align horizontally. Here is the CSS code I have been using: #loading > h1 { text-align: center; font-size: 21px; ani ...

htmlcsstext-alignment

What methods can I utilize to transmit Global variable data from a view to a controller?

In my Angular view file, I have the following code snippet. <!DOCTYPE html> <video id="myVideo" class="video-js vjs-default-skin"></video> <script> var dataUri; var videoData; var player = videojs("myVideo", { controls ...

javascriptangularjshtml

Welcome to the awe-inspiring universe of Typescript, where the harmonious combination of

I have a question that may seem basic, but I need some guidance. So I have this element in my HTML template: <a href=# data-bind="click: $parent.test">«</a> And in my Typescript file, I have the following code: public test() { alert( ...

javascripthtmltypescriptknockout.js

Ways to implement pointer event styling within a span element

Hi, I'm having trouble with styling and I can't seem to figure out how to resolve it. The style pointer-events: none doesn't seem to be working for me. Here is an example of my code: The style snippet: .noclick { cursor: default; ...

javascripthtmlcssangular

transform the input button into an anchor tag

How can I create a hyperlink for the code below: echo "<td><input type='button' class='btn btn-link text-dark' value='{$val_str}' onclick='redirect(\"{$value}\")'></td>" ...

phphtmlechohref

the toggle feature is not functioning properly on smartphones and tablets

I have embarked on the journey of creating a responsive website. The @media tag is new territory for me, and I'm unsure if I've implemented it correctly. My goal is to have a slidetoggle menu for the nav when the window size is less than 550px. ...

jqueryhtmlcsstogglemedia

Learn how to implement JavaScript code that allows a video to start playing only upon clicking a specific button

Within the confines of a div lies a <video autoplay> <source src='myvid'> </video>. This div initially has a display ='none' setting in its CSS. Upon receiving a click event, the display property changes from none to b ...

javascripthtml

Centering dilemma in the div

I have a main container with a width of 940 pixels. Inside the main container, there are two divs with a width of 250px each. My goal is to center align these boxes within the main container. However, the issue arises when the second div is added dynamic ...

jquerycsshtmlcenter

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

pythoncssgtk3

Enhancing the Appearance of Your Website with Yii

My Yii Website is nearly finished and I'm looking to revamp the default styling completely. Are there any recommended templates I can use, and what would be the most effective way to get started on the redesign? ...

cssyii