Irregular images and font sizes - mobile - html

Question

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

Answer 1

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 :)!