i created this grid that should change its layout responsive on a mobile device. The problem is that the content tends to overlap one another and not take up full height. I tried giving it a full height width but it still wouldnt take up the full height of the page. and changing up the grid but I always encounter the same problem.
Code:
body
{
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(4 , 1fr);
grid-template-rows: 2.4vw 50vw 10vw;
grid-gap: 1em;
}
*::-webkit-scrollbar {
display: none;
}
header ,footer
{
grid-column: 1 / span 5;
}
main
{
grid-column: 1 / span 3;
}
aside
{
grid-column: span 2;
}
/* Demo Specific Styles */
body {
margin: 0;
padding: 1 em 0;
}
header, main,aside,footer
{
display: flex;
align-items: center;
}
/*styling nav*/
nav{
width: 100%;
color: rgb(238, 234, 232);
background-color: #ff4654;
text-align: center;
}
nav ul li a{
text-decoration: none;
color: #000;
}
nav ul li{
list-style-type: none;
height: 40px;
line-height: 40px;
background-color: #ff4654;
}
nav> ul{
display: flex;
justify-content: space-around;
text-align: center;
}
nav ul li ul li{
display: none;
}
nav> ul >li:hover ul li{
display: block;
}
nav ul li{
flex-basis: 20%;
}
nav ul li:hover {
background-color: thistle;
}
/*footer*/
footer
{
display: flex;
justify-content: space-around;
bottom: 0;
width: 100%;
background-color:rgb(16, 24, 35);
color:rgb(238, 234, 232);
}
footer ul
{
list-style-type: none;
}
footer .information
{
display: flex;
justify-content: space-evenly;
}
footer a
{
color:rgb(222, 214, 211);
}
/*ability*/
.abilitylist
{
min-width: 75%;
max-width: 100%;
background-color: #000;
}
.abilitylist li
{
display: inline-flex;
}
.abilitytekst
{
display: none;
border:1px solid #f1f1f1;
color:#f1f1f1 ;
}
.ability
{
flex-basis: 20%;
}
.ability img:hover + .abilitytekst
{
display: block;
}
.ability
{
display: block;
}
/*sidebar*/
.sidebar
{
background-color: rgb(16, 24, 35);
}
.sidebar__content
{
color: rgb(238, 234, 232);
}
.sidebar__content h1
{
font-size: 2em;
text-align: center;
}
/*Responsive*/
#media only screen and (max-width: 480px)
{
/*small devices smartphone*/
main,
aside
{
grid-column: 1 / span 5;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content="width=device-width , initial-scale=1.0">
<meta name = "viewport" content ="heigth=device-height , initial-scale=1.0">
<link rel="stylesheet" href="css/Style2.css">
<link rel="icon" type="image/x-icon" href="img/valo_logo.ico" />
<title>sova</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Agents
<ul>
<li>Jett</li>
<li>Sova</li>
<li>Raze</li>
</ul>
</li>
<li>OverOns</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<div class = "abilitylist">
<ul class = "abilities">
<li class = "ability">
<img src = "img/sova/Sova_Q.png">
<div class = "abilitytekst">
Q-Shock Bolt EQUIP a bow with a shock bolt. FIRE to send the explosive forward,<br>
Rdetonating upon collision and damaging players nearby.<br>
HOLD FIRE to extend the range of the projectile.<br>
ALTERNATE FIRE to add up to two bounces to this arrow.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_E.png">
<div class = "abilitytekst">
E-Recon Bolt EQUIP a bow with a recon bolt. FIRE to send the recon bolt forward, activating upon collision<br>
and revealing the location of nearby enemies caught in the line of sight of the bolt.<br>
HOLD FIRE to extend the range of the projectile.<br>
ALTERNATE FIRE to add up to two bounces to this arrow.E-Tailwind INSTANTLY propel Jett in the direction she is moving.<br>
If Jett is standing still, she will propel forward.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_C.png">
<div class = "abilitytekst">
C-Owl Drone EQUIP an owl drone. FIRE to deploy and take control of movement of the drone.<br>
While in control of the drone, FIRE to shoot a marking dart. <br>
This dart will reveal the location of any player struck by the dart.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_X.png">
<div class = "abilitytekst">
X-Hunters Fury EQUIP a bow with three long-range wall-piercing energy blasts. FIRE to release an energy blast in a line<br>
in front of Sova, dealing damage and revealing the location of enemies<br>
caught in the line. This ability can be RE-USED up to two more times while the ability timer is active.
</div>
</li>
</ul>
</div>
</main>
<aside>
<div class="sidebar">
<div class="sidebar__content">
<span>
<h1>Sova</h1>
<img src="img/sova_avatar.jpg">
<h3>Role: Controller</h3>
<hr class = "lijn">
<h3>
Biography:<br>
Born from the eternal winter of Russia's tundra, Sova tracks, finds,
and eliminates enemies with ruthless efficiency and precision.
His custom bow and incredible scouting abilities ensure that even if you run, you cannot hide.
</h3>
</span>
</div>
</div>
</aside>
<footer class = "footer">
<div class = "Information">
<h1>Contact and Information</h1>
<ul>
<li>Contact us</li>
About us
<li></li>
</ul>
</div>
<div class = "agentsfooter">
<h1>Agent Guides</h1>
<ul>
<li>Jett guide</li>
<li>Raze guide</li>
<li>Sova guide</li>
</ul>
</div>
</footer>
</body>
</html>
I have made some changes just in the CSS (3 /*CHANGES*/).
body
{
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(4 , 1fr);
grid-template-rows: 2.4vw 50vw 10vw;
grid-gap: 1em;
}
*::-webkit-scrollbar {
display: none;
}
header ,footer
{
grid-column: 1 / span 5;
}
main
{
grid-column: 1 / span 3;
}
aside
{
grid-column: span 2;
}
/* Demo Specific Styles */
body {
margin: 0;
padding: 1 em 0;
}
/*CHANGES*/
header, main
{
display: flex;
align-items: center;
}
/*styling nav*/
nav{
width: 100%;
color: rgb(238, 234, 232);
background-color: #ff4654;
text-align: center;
}
nav ul li a{
text-decoration: none;
color: #000;
}
nav ul li{
list-style-type: none;
height: 40px;
line-height: 40px;
background-color: #ff4654;
}
nav> ul{
display: flex;
justify-content: space-around;
text-align: center;
}
nav ul li ul li{
display: none;
}
nav> ul >li:hover ul li{
display: block;
}
nav ul li{
flex-basis: 20%;
}
nav ul li:hover {
background-color: thistle;
}
/*footer*/
footer
{
/*CHANGES*/
position: absolute;
bottom: 0px;
width: 100%;
background-color:rgb(16, 24, 35);
color:rgb(238, 234, 232);
display: flex;
justify-content: space-evenly;
}
footer ul
{
list-style-type: none;
}
/*CHANGES*/
footer div {
width: 45%;
}
footer a
{
color:rgb(222, 214, 211);
}
/*ability*/
.abilitylist
{
min-width: 75%;
max-width: 100%;
background-color: #000;
}
.abilitylist li
{
display: inline-flex;
}
.abilitytekst
{
display: none;
border:1px solid #f1f1f1;
color:#f1f1f1 ;
}
.ability
{
flex-basis: 20%;
}
.ability img:hover + .abilitytekst
{
display: block;
}
.ability
{
display: block;
}
/*sidebar*/
.sidebar
{
background-color: rgb(16, 24, 35);
}
.sidebar__content
{
color: rgb(238, 234, 232);
}
.sidebar__content h1
{
font-size: 2em;
text-align: center;
}
/*Responsive*/
#media only screen and (max-width: 480px)
{
/*small devices smartphone*/
main,
aside
{
grid-column: 1 / span 5;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content="width=device-width , initial-scale=1.0">
<meta name = "viewport" content ="heigth=device-height , initial-scale=1.0">
<link rel="stylesheet" href="css/Style2.css">
<link rel="icon" type="image/x-icon" href="img/valo_logo.ico" />
<title>sova</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Agents
<ul>
<li>Jett</li>
<li>Sova</li>
<li>Raze</li>
</ul>
</li>
<li>OverOns</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<div class = "abilitylist">
<ul class = "abilities">
<li class = "ability">
<img src = "img/sova/Sova_Q.png">
<div class = "abilitytekst">
Q-Shock Bolt EQUIP a bow with a shock bolt. FIRE to send the explosive forward,<br>
Rdetonating upon collision and damaging players nearby.<br>
HOLD FIRE to extend the range of the projectile.<br>
ALTERNATE FIRE to add up to two bounces to this arrow.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_E.png">
<div class = "abilitytekst">
E-Recon Bolt EQUIP a bow with a recon bolt. FIRE to send the recon bolt forward, activating upon collision<br>
and revealing the location of nearby enemies caught in the line of sight of the bolt.<br>
HOLD FIRE to extend the range of the projectile.<br>
ALTERNATE FIRE to add up to two bounces to this arrow.E-Tailwind INSTANTLY propel Jett in the direction she is moving.<br>
If Jett is standing still, she will propel forward.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_C.png">
<div class = "abilitytekst">
C-Owl Drone EQUIP an owl drone. FIRE to deploy and take control of movement of the drone.<br>
While in control of the drone, FIRE to shoot a marking dart. <br>
This dart will reveal the location of any player struck by the dart.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_X.png">
<div class = "abilitytekst">
X-Hunters Fury EQUIP a bow with three long-range wall-piercing energy blasts. FIRE to release an energy blast in a line<br>
in front of Sova, dealing damage and revealing the location of enemies<br>
caught in the line. This ability can be RE-USED up to two more times while the ability timer is active.
</div>
</li>
</ul>
</div>
</main>
<aside>
<div class="sidebar">
<div class="sidebar__content">
<span>
<h1>Sova</h1>
<img src="img/sova_avatar.jpg">
<h3>Role: Controller</h3>
<hr class = "lijn">
<h3>
Biography:<br>
Born from the eternal winter of Russia's tundra, Sova tracks, finds,
and eliminates enemies with ruthless efficiency and precision.
His custom bow and incredible scouting abilities ensure that even if you run, you cannot hide.
</h3>
</span>
</div>
</div>
</aside>
<footer class = "footer">
<div class = "Information">
<h1>Contact and Information</h1>
<ul>
<li>Contact us</li>
About us
<li></li>
</ul>
</div>
<div class = "agentsfooter">
<h1>Agent Guides</h1>
<ul>
<li>Jett guide</li>
<li>Raze guide</li>
<li>Sova guide</li>
</ul>
</div>
</footer>
</body>
</html>
I think that the snippet is not the best to test this html code, so you can click on this link too https://codepen.io/zerbene/pen/mdERRjQ
Related
When I try to size down my desktop screen navigation size of 1440px(90em) to any lower width screen, my navigation bar links start dropping off the screen. I have tried using some media query combinations, but nothing to show for it.I haven't got much experience with frontend, so I am a little bit thin on this side. Any long-term fixes to this one?Any hint on this one will be highly appreciated.
HTML header code:
<!--header-->
<header>
<nav class="nav__bar">
<a href="#" class="logo">
<img src="./images/logo.svg" alt="Sunnyside logo">
</a>
<ul class="nav__links">
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="nav__item">
Project
</li>
Contact
</ul>
<img src="./images/icon-hamburger.svg" alt="toggle menu icon" class="toggle__menu">
</nav>
</header>
CSS header styles:
header {
height: 5em;
position: absolute;
left: 0;
right: 0;
}
.nav__bar {
height: 100%;
width: 90em;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
padding: 0 2em;
}
.nav__links {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav__item {
margin: 1em;
}
.nav__link {
text-decoration: none;
font-size: 1.125em;
color: hsl(0, 0%, 100%);
font-family: 'Barlow', sans-serif;
transition: all 350ms ease-in-out;
}
.nav__link:hover {
color: hsl(232, 10%, 55%);
}
.toggle__menu {
cursor: pointer;
display: none;
}
In your example code, you set the color of the link text to white... it's white on white. But that's not fully the problem... you should also remove width:90em from the .nav_bar... it's unnecessary. see this codepen https://codepen.io/aequalsb/pen/jOmyJNp
Just simply allow the <nav> to "be itself"... which is a block level element and naturally attempts to stretch out to fit available width.
padding in CSS Sizes the margin inside a button or element. Try using margin: (how many 'px' it's going off the screen); and I've had this problem before:
SOLUTION 1:
use margin-*left or top*: *px is going off screen*
<style>
#button {
width: 100px; /* the width of the button */
position: absolute;
left: 50%; /* always 50% when centering */
margin-left: -50px; /* minus half the size of the element */
}
</style>
<button id="button">Center of page</button>
SOLUTION 2
i've had this problem before, and in best situations, use position: absolute instead of relative if you are positioning the element.
<head>
<style>
.background {
position: relative;
}
.overlap {
position: absolute;
left: 30px;
}
</style>
</head>
</style>
</head>
<body>
<!-- background-element -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Circle_Rufous_Solid.svg/1200px-Circle_Rufous_Solid.svg.png" class="background" width="10.5%" />
<!-- Overlap element -->
<img src="https://cdn.onlinewebfonts.com/svg/img_24930.png" class="overlap" width="10%" />
</body>
SOLUTION 3
if none of the above works, consider using javascript: device tester command and redirect to an error page with unsupported devices.
This example will detect a handful of mobile-devices, and if so, it'll redirect to 𝘩𝘵𝘵𝘱://𝘨𝘰𝘰𝘨𝘭𝘦.𝘤𝘰𝘮
<script>
if( /Android|webOS|iPhone|iPad|Mahc|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://google.com";
} else {
}
</script>
NOTE: if there is big problem you cannot solve, and none of these work, its best to do research or find some articles to find your answer. Then consider using stackoverflow.
This is what the site is like when in desktop mode:
Now in mobile mode:
You can see that there is now extra space on the bottom. I make sure to erase margins everywhere but the space still remained there.
Pertinent css code:
.grid-container{
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 5rem 1fr 3rem;
height: 100%;
}
.main {
grid-area: main;
background-image: url("res/background_min.jpg");
overflow: hidden
}
/*Home Screen*/
.home{
display: flex;
}
.menu-list{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100%;
}
.menu-list a {
padding: 0rem;
flex: 0 1 50rem;
margin: 1.5rem;
height: 100%;
width: 100%;
display: flex;
text-decoration: none;
color: white;
}
.menu-list li
{
display: flex;
list-style-type: none;
text-decoration: none;
align-items: center;
justify-content: center;
width: 100%;
height: 10%;
}
.menu-list p {
font-size: 2vw;
}
.section a {
color: #ffffff;
font-weight: bold;
font-size: 2vw;
text-decoration: none;
}
.about {
background-image: linear-gradient(to right, cyan, magenta);
}
.contacts {
background-image: linear-gradient(to right, fuchsia, turquoise);
}
.projects{
background-image: linear-gradient(to right, turquoise, fuchsia);
}
.question-box {
background-image: linear-gradient(to right, magenta, aqua);
}
.home-main-image{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 45%;
}
.home-main-image img{
max-width: 99%;
}
.fade-in {
animation: fadeIn ease 2s;
}
.button{
background-image: linear-gradient(to right, cyan, magenta);
border: none;
text-align: center;
color: white;
text-decoration: none;
font-size: 1vw;
padding: .5rem;
}
Menu list is the vertical column of buttons that should occupy most of the screen on the left, and home-main-image is the giant terminal logo plastered on the right.
Note that the issue happens with a real mobile device too.
Edit: For clarification, this is the extra space:
Edit: added react html:
App.js
function App() {
const [lang, setLang] = useLanguage();
const handleLanguageChange = () => {
if (lang.lang === 'eng'){
setLang('fr')
} else {
setLang('en')
}
}
return (
<BrowserRouter>
<div className="grid-container">
<header className="header">
<div className="brand">
<Link to="/" >
Eduardo Breton
</Link>
</div>
<div className="header-side">
{lang.subtitle}
</div>
<div className="header-right">
<button className="button" onClick={() => handleLanguageChange()}>{lang.traduction} </button>
</div>
<div>
</div>
</header>
<main className="main">
<div className="content">
<Route path="/" exact={true} component={HomeScreen} />
<Route path="/about" component={AboutScreen}/>
<Route path="/contact" component={ContactScreen}/>
<Route path="/project" component={ProjectScreen}/>
<Route path="/question" component={QuestionScreen}/>
</div>
</main>
<footer className="footer">
© 2020 Eduardo Breton
</footer>
</div>
</BrowserRouter>
);
}
HomeScreen.js:
const { Link } = require("react-router-dom");
function HomeScreen() {
const [lang, setLang] = useLanguage();
return <div className="home">
<ul className="menu-list">
<Link to="/about">
<li className="fade-in section about" >
{lang.about}
</li>
</Link>
<Link to="/contact">
<li className="fade-in section about" >
{lang.contact}
</li>
</Link>
<Link to="/project">
<li className="fade-in section about" >
{lang.projects}
</li>
</Link>
<Link to="/question">
<li className="fade-in section about" >
{lang.question}
</li>
</Link>
</ul>
<div className="home-main-image fade-in">
<img src={terminalImage} />
</div>
</div>
}
export default HomeScreen;
Checked answer with the discussion has fixed the issue, changing flex-direction to column on a media screen on main has allowed me to center correctly the contents:
the first thing you need to do is add a meta description for mobile view in the head. These in particular
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Next you need to make your site responsive by adding media queries so that the home main image and your buttons become responsive. You should increase the size of the menu buttons and set them to
#media screen and (max-width:650px) {
.menu-list li {
flex-direction:column;
}
}
That way your buttons will be bigger, aligned in the center, AND in a column (this will look better on mobile). You should also change the flex direction of the main image. Also, try adding some padding between the buttons in mobile view, this should also help in taking up the space.
Unfortunately it wont display my drop-down nav block on hover, hope someone can help. I'm trying to change display:none to display: block on the class .moreMenu.
html
css
Here is my code...
HTML
<div class="navigationBar">
<div class = "navigationBarTitles">
HOME
VERBS
NOUNS
ADVERBS
ADJECTIVES
GRAMMAR
<a href="contact.html" class= "more">MORE
<div class="moreMenu">
TRIAL VIDEOS
ABOUT
CONTACT
GCSE EXAM PREP
PLANS & PRICING
GRAMMAR
</div>
</a>
</div>
CSS
.moreMenu {
display: none;
position: absolute;
width: 140px;
height: 180px;
background-color: white;
z-index: 2;
}
.more:hover .moreMenu {
display: block;
}
You have an error in your HTML: you can't nest interactive elements. Since the .moreMenu div contains <a> elements, and is itself contained in an <a> element, it won't work.
Solution: don't put the <div> inside the MORE link, but put them next to each other in a container.
.more {
display: inline;
}
.moreMenu {
display: none;
position: absolute;
width: 140px;
height: 180px;
background-color: white;
z-index: 2;
}
.more:hover .moreMenu {
display: block;
}
<header>
<div class="navigationBar">
<div class="navigationBarTitles">
HOME
VERBS
NOUNS
ADVERBS
ADJECTIVES
GRAMMAR
<div class="more">MORE
<div class="moreMenu">
TRIAL VIDEOS
ABOUT
CONTACT
GCSE EXAM PREP
PLANS & PRICING
GRAMMAR
</div>
</div>
</div>
</div>
</header>
Please help me. I need 3 li element like in image those I downloaded (icon+text), but they have wrong behavior.
I need like this
.icon-equipment {
background-image: url('http://infocem.info/wp-content/uploads/2017/05/1.png');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
ul {
list-style: none;
}
.advantages {
display: flex;
flex-flow: row wrap;
border: 1px solid purple;
height: 123px;
margin: 0;
padding: 0;
}
.advantages > * {
margin-left: 92px;
}
<ul class="advantages">
<li class="icon-equipment">Поставка оборудования<br> и запчастей<br><span>От 11 ведущих производителей</span><li>
<li class="icon-payment">Рассрочка платежа<br><span>До 45 дней с оформления заказа</span></li>
<li class="icon-delivery">Доставка товаров<br><span>Международная и междугородняя<br>в срок до 10 дней</span></li>
</ul>
The main thing to understand here is how to set-up a good hierarchy, so that you may have control over it. What I mean is, you have to separate your item into sections, which can be arranged easily using your model of choice (flexbox in this case).
Just take a look at the html that I have provided, see how it is structured. You have a container, within that container you have two elements, a left-side element (icon) and a right-side element (texts).
Styles are also a thing to notice, you will need some prefixing as well.
Since this is your first time on stackoverflow, I will give you this code ready for use. Usually you have to provide some code that you have been working on, and then seek assisstance for it. Whatever you do, please DO NOT expect this for future problems that you post here on Stack. Read the rules, follow the rules.
html {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.icon-equipment {
background-image: url('http://infocem.info/wp-content/uploads/2017/05/1.png');
background-position: left center;
background-repeat: no-repeat;
/* Adjust according to image size to push text across. */
}
ul {
list-style: none;
}
.advantages {
display: flex;
flex-flow: row wrap;
margin: 0;
padding: 0;
}
.advantages .advantages-item {
display: flex;
align-items: flex-start;
background: #000;
color: #fff;
padding: 1rem;
max-width: 300px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.advantages .advantages-item:last-of-type {
margin-right: 0;
}
.advantages .advantages-item .item-right {
display: flex;
flex-direction: column;
padding-left: 1rem;
}
.advantages .advantages-item .item-right .right-text {
font-weight: bold;
text-transform: uppercase;
margin: 0;
margin-bottom: 1rem;
}
<ul class="advantages">
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
</ul>
A few tiny problems have been torturing me for weeks. After many researches and many trials I still can't figure out what to do.
On my online resume, the desktop display if perfect. On mobile though, there are many inconsistencies with font and images sizes.
Link of the page: t.btmx.fr
Problems
If you have an idea what's wrong or if there's something I should learn that would be very helpful :)!
Thank you very much!
Below is the code as asked by Paulie_D. I'm sorry if it's so long I don't know what to remove :(. First you'll find the CSS for small screens using media queries, then the "normal" CSS and then the HTML.
#
media screen and(max - width: 1000px) {
header {
font - size: 1em;
}
p {
font - size: 0.8em;
}
#
contact_button {
font - size: 1em;
}
#
personal - info - and - topskills {
display: flex;
flex - direction: column;
}
#
containermain {
display: flex;
flex - direction: column;
}
.topitem: nth - child(2) {
max - width: 100 % ;
}
.subelementspecial /* floating logo | title */ {
display: flex;
flex - direction: column;
}
}
header {
border-radius: 0.5em;
background-color: #AFC600;
opacity: 0.7;
margin: auto;
margin-bottom: 4em;
padding-bottom: 0.1em;
padding-top: 0.1em;
font-size: 0.8em;
text-align: center;
max-width: 1920px;
}
.bg1 {
background: url("medias/background.jpg") no-repeat top center;
}
.bg2 {
background: #232A2A;
}
#main-wrapper {
width: 100%;
background-attachment: scroll;
background-size: contain;
font-family: "texgyrescholaregular", Verdana, Georgia, serif;
}
#personal-info-and-topskills {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
padding: 2em;
}
.topitem {
border-radius: 0.5em;
padding: 0 1.3em 0.6em 1.3em;
margin: 1em;
}
.topitem h2 {
margin-bottom: 1.5em;
}
.topitem:nth-child(2) {
opacity: 0.9;
min-width: 300px;
background-color: #3D3D39;
border-radius: 0.5em;
/* padding : top right bottom left */
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
max-width: 40em;
}
.topitem:nth-child(2) p {
color: white;
line-height: 2em;
}
.topitem:nth-child(2) strong {
color: #d8616f;
}
#contact_button {
background: #D3D699;
text-align: center;
color: black;
border-radius: 1em;
width: 40%;
margin: auto;
margin-bottom: 1em;
margin-top: 1em;
}
.topitem:nth-child(3) {
background: #C4D9D0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 400px;
}
.topitem:nth-child(3) h2 {
color: black
}
#languages {
width: 100%;
}
.topitem:nth-child(4) {
background: #e0cece;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 350px;
}
.topitem:nth-child(4) h2 {
color: #b25960;
}
#containermain
/* contains experience, skills and education */
{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
align-items: flex-start;
padding: 2em;
}
.cmain-element {
background-color: #FCF8F5;
border-radius: 1em;
padding: 0 1.3em 0.6em 1.3em;
margin: 1em;
max-width: 1500px;
/*properties for all the childs*/
}
.cmain-element:nth-child(1) {
flex: 1;
}
.cmain-element:nth-child(2) {
flex: 1;
}
.float-logo-title {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.work-place-time h3 {
margin-top: 0.1em;
}
.logo {
margin-right: 30px;
}
#hobbies-passions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
align-items: flex-start;
background-color: #FCF8F5;
border-radius: 5px;
width: 40em;
margin: auto;
margin-bottom: 3em;
}
#hobbies-img {
text-align: center;
}
footer {
display: flex;
height: 60px;
border-radius: 5px;
background-color: #546363;
opacity: 0.8;
margin: auto;
max-width: 1920px;
}
#footerbox {
width: 40%;
display: flex;
margin: auto;
justify-content: space-around;
}
#font-face {
font-family: 'texgyrescholaregular';
src: url('font/texgyreschola-regular-webfont.eot');
src: url('font/texgyreschola-regular-webfont.eot?#iefix') format('embedded-opentype'), url('font/texgyreschola-regular-webfont.woff') format('woff'), url('font/texgyreschola-regular-webfont.ttf') format('truetype'), url('font/texgyreschola-regular-webfont.svg#texgyrescholaregular') format('svg');
font-weight: normal;
font-style: normal;
}
h2 {
color: #DE7F89;
font-size: 1.5em;
line-height: 1.5em;
}
h3 {
font-size: 1.3em;
line-height: 1.5em;
}
h4 {
font-size: 1em;
line-height: 1.5em;
}
p {
font-size: 0.9em;
line-height: 1.5em;
}
ol,
ul {
font-size: 0.9em;
line-height: 1.5em;
/* for changing indent
padding-left: 30px;
*/
}
/*strong=default*/
a {
color: green;
text-decoration: none;
font-style: italic;
}
a:hover {
color: green;
}
a:active {
color: red;
}
a:visited {
color: purple;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="smallscreen.css" />
<meta charset="utf-8">
<title>Resume - Thibault Bétrémieux</title>
<link rel="icon" href="http://t.btmx.fr/wp-content/uploads/2016/07/favicon.png">
</head>
<div class="bg2">
<body>
<div class="bg1">
<div id="main-wrapper">
<header>
<h1>Thibault Bétrémieux - Resume as of 16<sup>th</sup> July 2016</h1>
</header>
<section id="personal-info-and-topskills">
<div class="topitem">
<p>
<a href="medias/thibault_betremieux_photo.jpg" target=_blank>
<img src="medias/thibault_betremieux_photo_mini.png" title="click to enlarge :) !" alt="Resume photo Thibault Bétrémieux" />
</a>
</p>
<!-- <a href.../> <Miniature/> </a> -->
<!-- target=_blank open in new link -->
</div>
<div class="topitem">
<h2>Personal information</h2>
<p><strong>About me: </strong>I am a young french expat living in Germany since two years, I speak four languages (French,English,German and Italian)</p>
<p><strong>Date of birth: </strong>24/12/1991</p>
<p><strong>Desired position: </strong>Online marketing or management in an international environment</p>
<p><strong>Place of residence:</strong> Bamberg, Bavaria (Germany)</p>
<a href="http://t.btmx.fr/contact">
<div id="contact_button">Contact me</div>
</a>
</div>
<div class="topitem">
<h2>Languages</h2>
<div id="languages">
<img src=medias/languages_450px.png alt="Languages">
</div>
</div>
<div class="topitem">
<h2>Computer skills</h2>
<h3>Microsoft Office</h3>
<ul>
<li>Word (including Mailing)</li>
<li>Excel (including charts and pivot tables)</li>
<li>PowerPoint (including masks)</li>
<li>Outlook</li>
</ul>
<h3>Internet</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>WordPress</li>
</ul>
</div>
</section>
<section id="containermain">
<div class="cmain-element">
<h2>Professional experience</h2>
<div class="float-logo-title">
<!-- is used to put the logo next to the title of work, place, and date-->
<div class="logo">
<p>
<img src="medias/aul_logo.png" alt="Logo Arbeit und Leben NRW" />
</p>
</div>
<div class="work-place-time">
<h3>Project manager (non renewable fixed-term contract)</h3>
<h4>Arbeit und Leben NRW, Düsseldorf, Germany</h4>
<p>05.2015 - 04-2016</p>
</div>
</div>
<ul>
<li>Organization and leading of Franco-German meetings for young people in vocational training – within the Program funded by the Franco-German Youth Office (OFAJ/DJFW) “Work in the partner country”</li>
<li>Animator of some of those meetings and training for the leading of intercultural exchanges</li>
<li>Development of partnerships between “Arbeit und Leben NRW”, socio-political organizations and/or vocational training centers</li>
</ul>
<div class="float-logo-title">
<div class="logo">
<p>
<img src="medias/dialoge_logo.png" alt="Logo Dialoge Sprachinstitut" />
</p>
</div>
<div class="work-place-time">
<h3>Assistant to the school direction (Master internship)</h3>
<h4>Dialoge Sprachinstitut GmbH, Lindau, Germany</h4>
<p>09.2013 - 01.2014</p>
</div>
</div>
<ul>
<li>CRM</li>
<li>Marketing: competition analysis and prospect survey research</li>
<li>Data exploitation and creation of documents for the ISO 9001 school certification</li>
<li>Various tasks for the school manager</li>
</ul>
<p>
<img src="medias/hsbc_trinkaus_logo.png" alt="HSBC Trinkaus logo" />
</p>
<!-- the logo is too large for any text to stand on its side -->
<h3>Assistant of the Team “Support to insolvency administrators” (Bachelor internship)</h3>
<h4>HSBC Trinkaus & Burkhardt AG (Corporate cients), Düsseldorf, Germany</h4>
<p>05.2012 – 08.2012</p>
<ul>
<li>Insight into equity backing principles, insolvency re-financing and trust accounts administration</li>
<li>Assistance to the team for opening trust accounts and for monitoring steps of insolvency proceedings</li>
<li>Daily queries for new insolvency cases in dedicated data bases</li>
</ul>
</div>
<div class="cmain-element">
<h2>Education</h2>
<h3>Specialization in E-Commerce and online Marketing</h3>
<h4>Conservatoire National des Arts et Métiers, Paris (Online training), France</h4>
<p>10.2014 - 04.2016</p>
<ul>
<li>“Online advertising and communication “(ESC127) - Grade: 1</li>
<li>"E-Commerce “(ESC128) - Grade: 1</li>
<li>“Collection and processing of digital marketing data “(ESC129) - Grade: 1</li>
<li>“Decision-making statistics in marketing “(ESC104) - Grade: 2,2</li>
<li>“Electronic marketing – digital marketing “(ESC123) - Grade: 1</li>
</ul>
<h3>Double degree: Master of Arts “Internationale Wirtschaftsbeziehungen” (International Economic Relations) – Grade 1,9</h3>
<h4>Albert-Ludwigs-Universität Freiburg, Freiburg im Breisgau, Germany</h4>
<p>10. 2012 - 09. 2014</p>
<p><strong>Masterarbeit: “Legislative environment of the bio-food sector”</strong> (Master’s thesis, 2014, 77p.) in German.</p>
<p>The founding texts (Codex Alimentarius and IFOAM Guidelines) and the laws of organic food; their relationships with the most famous bio private labels, internationally and in some regions and countries deeply involved in the organic food sector
(EU, USA, Switzerland, Germany, France, Austria ...).</p>
<h3>Double degree: Master of Arts „Commerce et Affaires internationales“ (International Business) – Grade 1,9</h3>
<h4>Université Paris Est Créteil (U-PEC), Créteil, France</h4>
<p>10.2012 - 09. 2014</p>
<p><strong>Theoretical work for preparing my internship: “Quality and training”</strong> (Sept. 2013, 35 p.) in French.</p>
<p>EFQM (European Foundation for Quality Management) excellence model and quality management with examples relative to training. Management process of a training action, from creation to evaluation and its improvement in the context of a quality
approach.
</p>
<h3>Bachelor of Arts „Commerce et Affaires Internationales“ (International Business) – Grade 1,6</h3>
<h4>Université Paris Est Créteil (U-PEC), Créteil, France</h4>
<p>10.2009 - 08.2012</p>
<p>Diploma with four languages (French, English, German, Italian)</p>
<h3>Baccalauréat</h3>
<h4>Lycée d’Arsonval, Saint Maur des Fossés</h4>
<p>06.2009</p>
<p>Scientific Baccalauréat in engineering sciences</p>
</div>
</section>
<section id="hobbies-passions">
<div id="hobbies-img">
<h2>Hobbies and passions</h2>
<p>
<img src="medias/hobbies_passions_1.png" alt="My hobbies and passions" />
</p>
<p>
<img src="medias/hobbies_passions_2.png" alt="My hobbies and passions" />
</p>
</div>
</section>
<footer>
<div id="footerbox">
<div class="footerelement">
<a href="https://linkedin.com/in/thibaultbetremieux">
<img src="medias/footer/linkedin_logo_40px.png" alt="Thibault Bétrémieux Linkedin">
</a>
</div>
<div class="footerelement">
<a href="https://www.xing.com/profile/Thibault_Betremieux">
<img src="medias/footer/xing_logo_40px.png" alt="Thibault Bétrémieux Xing">
</a>
</div>
<div class="footerelement">
<a href="http://t.btmx.fr/category/tech">
<img src="medias/footer/wp_articles_40px.png" alt="Thibault Bétrémieux Wordpress articles">
</a>
</div>
</div>
</footer>
</div>
</div>
<!--BG1 -->
</div>
<!--BG2 -->
</body>
</html>
Notes:
Perhaps this can help (it's the structure of the website):
i.stack.imgur.com/BEHxr.png
(I can post only 2 links max please copy paste and sorry...)
What I've tried so far:
for the text: redifining all font-sizes with media-queries for screens smaller than 1000px. For some reason, I have to define font-size for subitems (Box-> Item -> Subitems) because changing h2 or p etc. doesn't affect them. I have to use crazy values like 1.7em for them to look alright on mobile. But then if I'm on desktop with a reduced window (at less than 1000px), 1.7em looks huge :( !!
for the images: setting the image as background of the parent's (if I'm not mistaken) box seemed like a promising solution, however when I did that, the image was overflowing the box on the mobile :( ! I've also tried putting width=100% on parent or child but it didn't work.
other things that didn't make any sense or things I can't remember :P
I managed to resolve all problems by using the following code which gives a scale to the page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Take care :)!