Hi!
I was wondering how to make my images responsive so they end up under each other at the same time when they reach the breaking point? I want the to go from horisontal to vertical, all three at the same time if that makes any sense?
And also, how do I put text underneath the each image that follows when I adjust the size of the screen? I want the breaking point to be at 600px.
Here's the HTML: - <html>
-
<head>
-
<title>Fitness Junkies</title>
-
<meta charset="utf-8">
-
<link rel="stylesheet" href="main.css">
-
<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Open+Sans+Condensed:300" rel="stylesheet">
-
</head>
-
-
<body>
-
<header>
-
<h1>Fitness Junkies</h1>
-
<p style="font-size:1.8rem;"></p>
-
</header>
-
-
<ul class="nav">
-
<li><a href="index1.html">Startsida</a></li>
-
<li><a href="träning.html">Träning</a></li>
-
<li><a href="kost.html">Kost</a></li>
-
<li><a href="inspo.html">Inspo</a></li>
-
</ul>
-
-
<h2> Artiklar</h2>
-
<main>
-
<section>
-
<ul>
-
<li><img src="kost.jpg"> </li>
-
-
<li><img src="fitness.jpg"> </li>
-
-
<li><img src="inspo.jpg"> </li>
-
-
</ul>
-
</section>
-
</main>
-
-
-
<footer>© 2018 | Linnéa Bengtsson</footer>
-
-
</body>
-
-
</html>
And the CSS: - /* Basic styles and resets */
-
body,html,h1,h2,p, div,a,img,header,footer,span,section{
-
margin: 0;
-
padding: 0;font-family: 'Julius Sans One', sans-serif;
-
}
-
footer,header{
-
background: ; color: lightgreen; text-align: center; padding: 2em 0;
-
opacity: 0.7;
-
font-family: 'Julius Sans One', sans-serif;
-
}
-
-
footer { font-size: 3rem;
-
-
-
}
-
-
header {
-
-
font-size: 5rem;
-
}
-
html,body{
-
width: 100%;
-
}
-
html{
-
font-size: 62.5%;
-
}
-
body{
-
position: relative; font-size: inherit;
-
}
-
-
/* Styling for the image distribution part */
-
ul, li, img{
-
margin: 0;
-
padding: 0;
-
}
-
section ul{
-
width: 100%;
-
margin: 0 auto;
-
text-align: center;
-
}
-
section ul li{
-
list-style-type: none;
-
display: inline-block;
-
margin: 2rem 0;
-
-
}
-
section ul::after{
-
content: "";
-
width: 100%;
-
display: inline-block;
-
margin:4rem;
-
}
-
-
/*Meny*/
-
.nav {
-
background: white;
-
columns: 100px 4;
-
column-gap: 3px;
-
list-style-type: none;
-
-
-
}
-
-
.nav a {
-
text-decoration: none;
-
font-size: 15pt;
-
font-weight: bold;
-
color: #696969;
-
display: block;
-
padding: 1em;
-
text-align: center;
-
border-bottom: 1px solid "grey";
-
-
}
-
.nav a:hover {
-
background:#F5F5F5;
-
-
}
-
-
h2 {
-
text-align: center;
-
color: palegreen;
-
font-size: 30px;
-
font-family: 'Julius Sans One', sans-serif;
-
padding: 17px;
-
opacity: 0.9;}
And yes, I am a beginner as you probably can tell so no judge please haha :)
1  26221 
You should probably use media queries. This page should help you find out about them. If you need more information, just google it.
You would probably use something like this: -
@media only screen and (max-width: 600px) {
-
section ul li{
-
display: block;
-
}
-
}
-
Hope that helps :)
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Jim Christiano |
last post by:
I've created a C# window's form application that migrates data. As it
migrates data, the program itself is non-responsive. I would like to
implement a cancel button to stop the migration...
|
by: Jawahar |
last post by:
All,
I have an application in asp.net
the application opens a lot of Modal diaglog pages. When modal dialogs are
close the parent aspx page is often un-responsive.
I mean I can click the buttons...
|
by: Urs Vogel |
last post by:
Hi
I would like to set a Windows.Form into a non responsive state, i.e. that it
does not respond to user input of any kind, similar to the state a forms
gets when another modal form is opened...
|
by: blueturtle |
last post by:
Hi,
I'm newbie to C#, and I would like to know what is the common solution
to a problem that I encounter.
The scenario:
Performing a long task, without blocking the UI thread, so it will stay...
|
by: NoelByron |
last post by:
I need to do some intense calculations in my application. Those are
done by a third party Python library and consume 100% CPU time for some
seconds. The computations take place in their own thread...
|
by: Radu |
last post by:
Hi. I need to implement a "phone-book" kind of feature - I have a list
of about 50.000 people, and the user should be able to find anyone by
typing either the (beginning of the) last name, either...
|
by: Developer111 |
last post by:
In my (VB.Net+VS2008) application, I want to make my windows form (splash) more responsive as there is some complex functionality is performing while loading splash form. Currently when any other...
|
by: parker81 |
last post by:
I'm trying to build a responsive header for a website that I'm designing using the fittext.js plug-in. The text is scaling perfectly but I can't figure out how to nudge the text down so that the...
|
by: kumaraja |
last post by:
Hi,
I am planning to build a web application based on responsive design so it is compatible with most devices (Desktop, laptop, tablets etc.). The application will have super admin, admin and user...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
