I am working on a flexbox layout with 3 flexbox containers and where one of them has a nested flexbox layout inside of it. The one with the nested flexboxes seems to wrap/break too early, eventhou there is available for space for it to take up. I have tried so many different combinations of flex-grow and flex-shrink on the parent elements that I feel like I'm losing my mind, still I can't shake the feeling that there is a simple solution to this.
It works exactly as I want it when the size of the browser is ~ 1600px but as soon as it resizes to smaller it seems breaks the layout and wraps, even thou there is available space for it to continue maintain it's layout.
I can achieve what I want if I change the flex-grow setting on the parent but then the flexboxes doesn't align anymore, which I want. How do I keep both the alignment and the flexbox-growing?
Correct layout but breaking too early example https://jsfiddle.net/9g5dam6f/
Growing properly but not aligning correctly example https://jsfiddle.net/bctgv7ah/
Here is the code as well for the one that breaks too early, but is correctly aligned:
.content {
width: 100%;
overflow: hidden;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.col-info {
margin: 0 0px 20px;
box-sizing: border-box;
}
.columns {
display: flex;
padding: 1.2em;
flex-wrap: wrap;
box-sizing: border-box;
}
.col-45-info {
width: 40%;
background-color: hotpink;
}
.col-26-info {
width: 26.65%;
justify-content: end;
display: flex;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: wrap;
background-color: purple;
}
.col-33-info {
width: 33.33%;
background-color: pink;
}
.col-50-info {
width: 51%;
display: flex;
flex-wrap: wrap;
gap: 2em;
background-color: grey;
opacity: 50%;
}
h1 {
font-family: Helvetica, sans-serif;
font-size: 21px;
text-align: left;
}
.columns h1 {
margin-bottom: 1rem;
}
.columns p {
font-size: 16px;
font-family: Helvetica, sans-serif;
line-height: 1.3;
}
li {
text-align: left;
font-size: 16px;
font-family: Helvetica, sans-serif;
list-style-type: none;
line-height: 1.17;
}
.columns a {
text-decoration: underline;
font-family: Helvetica, sans-serif;
color: black;
font-size: 16px;
width: 100%;
}
<div class="content">
<div class="columns">
<div class="col-info col-33-info">
<h1> TRAILBLAZER </h1>
<li>Art Direction </li>
<li>Creative Concept</li>
<li> Graphic Design </li>
<li> Web Design </li>
<li> Web Development </li>
<li> Visual Effects </li>
</div>
<div class="col-info col-45-info">
<p> Art direction and campaign for design collaboration between international brands Marimekko, Matty Bovan, Nomen Nescio, palmer//harding, Per Götesson, Zandra Rhodes, final-year fashion students at Beckmans College of Design and Stockholm Fashion
Week. <br> <br> The story of the Trailblazer is the story of the innovator. Inspired by the strong artistic approach of all brand and designers, we created a creative concept inspired by 90’s anime and manga that could fit each collections individuality,
and where each collection could be the hero in their own world, where they blaze a trail for others to walk on. <br> <br> The final develiberables included: A concept film, campaign photos, lookbook photos, website design and development, digital
and some material.
</p>
</div>
<div class="col-info col-26-info">
<div class="col col-50-info">
<li> <a target="_blank" href="https://trailblazer.beckmans.college/"> Visit the web </a> <br>
<a target="_blank" href="https://vimeo.com/510337626"> Watch the film </a> <br>
<a target="_blank" href="https://trailblazer.beckmans.college/"> ELLE Magazine </a> <br>
<a target="_blank" href="https://trailblazer.beckmans.college/"> ArtsThread </a>
</li>
</div>
<div class="col-50-info">
<li class="col" style="margin:0;">
Date
<br> Team </li>
<li class="col"> 2020 <br> Almir Jasarevic <br> Astrid Askert <br> Elisabet Lindén <br> Saba Mehrabanfar <br> Sofia Hjortberg
</li>
</div>
</div>
</div>
</div>
I got it working by using justify: space-between; and setting a fixed width for the sibling elements.
You can see the working example here: https://jsfiddle.net/yrwh062z/2/
This is a simple used automobile sales platform for a dealer who doesn't want a lot of interactivity, just a listing of the vehicles and prices in a visual manner similar to a print magazine (click on Run Code Snippet and View Full page to see it as it looks currently):
body {
font-family: Helvetica, sans-serif;
}
header, footer {
background-color: #7690AC;
color: #FFFFFF;
padding: 20px;
padding-bottom: 20px;
}
.content {
padding: 10px;
margin-bottom: 10px;
margin-left: 20px;
}
.grid {
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
align-items: center;
}
.grid > article {
border: 1px solid #333;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
min-height: 25em;
top: -10px;
}
.grid > article img {
max-width: 100%;
margin-bottom: 12px;
}
.text {
font-size: 1em;
transform: scaleX(1.2) scaleY(1);
margin-left: 25px;
width: 270px;
}
.text {
padding: 0 10px 20px;
}
.text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
h3.price {
text-align: center;
}
.cards {
grid-template-columns: repeat(2, 1fr);
border-collapse: collapse;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
p.address, p.phoneno {
font-size: 18px;
font-weight: 900;
line-height: 12px;
}
☎:before {
font-size: 14px;
}
<header>
<h1>YOURMOTORHOMES</h1>
<h2>Axtley Road, Penderton XX1 1XA</h2>
<h2>01634 00000</h2>
</header>
<div class="content">
<p>Welcome to YourMotorhomes!</p>
</div>
<main class="grid">
<article>
<img src="https://i.imgur.com/PApYyjj.jpg" alt="Elddis Autoquest">
<div class="text">
<p><b>2020 70 ELDDIS AUTOQUEST 194 2.2 HDi 140 LOW PROFILE MOTORHOME PEUGEOT BOXER CHASSIS</b>
4 berth, end washroom, white, 100 litre fresh water, 70 litre waste water, 3 ring hob, OG cooker, 155 litre fridge, 600 miles, almost as new, <b class="price">£44895</b></p>
</div>
</article>
<article>
<img src="https://i.imgur.com/h7Cujxy.jpg" alt="Dethleffs Esprit"><em>Image for illustration purposes only</em>
<div class="text">
<p><b>2014 64 DETHLEFFS i6810 ESPRIT 2.3 MULTIJET 130 A-CLASS FIAT DUCATO MOTORHOME</b>
4 berth, 4 belted seats A-class motorhome finished in Diamodn White, fixed single bed layout, 3 ring cooker, fully loaded spec, 28,000 miles <b class="price">£62115</b></p>
</div>
</article>
<article>
<img src="https://i.imgur.com/TfuaqVa.jpg" alt="Burstner Aviano">
<div class="text">
<p><b>2009 59 BURSTNER AVIANO i725 3.0 MULTIJET 180 FIAT TD</b>
4 berth, gold, island bed layout, 3 ring hob, 150 litre fridge, 7.45m length, 2.30m width <b class="price">£44995</b></p>
</div>
</article>
<article>
<img src="https://i.imgur.com/oUWFVub.jpg" alt="Burstner Nexxo">
<div class="text">
<p><b>2009 58 BURSTNER NEXXO FAMILY A645 2.2 TDCi</b>
6 berth, 6 belted seats, end bedroom, blue, Layout - Over Cab Double, Centre Dinette Double, Rear Bunk beds, 2 Owners from New, Good Service History, Cab Air Conditioning, Gaslow Refillable LPG System, Truma Blown Air Combination Boiler, HPI Clear, Roof Rails, Large Garage - if not using bottom bunk, Awning,MOT 17/12/2021, 11 Service Stamps in the book, Last Damp check 01/21, GVW 3500kg, Length 6.56m, Width 2.30m, Height 3.0m, only 20,747 miles, registered 30/01/2009, MoT due in Oct' 21. DUE THIS WEEK. A GREAT EXAMPLE OF THIS BURSTNER MOTORHOME, MUST BE SEEN NOW, YOU WILL NOT FIND BETTER
<b class="price">£35000</b></p>
</div>
</article>
</main>
<footer>
content
</footer>
Functionally, it works, but I want to try and achieve three things; the within grid being all the same size, and also the images being the same size within the article (I've got it at max-width:100%) so it's not creating uneven sizes (if you view the design at full screen) and preventing text overflow by auto-resizing the font if there's a lot of text without needing a scrollbar or overflow: hidden; in the CSS.
I would be grateful if anyone can help, as this template's working, not quite production-ready, but it's getting there slowly.
Try this -
1. Remove transform property form .text class and
2. Remove align-items from .grid class.
.text {
font-size: 1em;
/* transform: scaleX(1.2) scaleY(1); */ // Comment it.
margin-left: 25px;
width: 270px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
/* align-items: center; */ //Comment it.
}
The given code arranges the articles in a grid which adjusts to the viewport width OK but these things are required:
The height of each article should be the same
The height of each image should be the same
The text should have font-size adjusted so that it always fits within the article size
Taking each requirement in turn:
Set the height of article to something. It depends on what you think would be sensible bearing in mind the maximum amount of text a van may require - to ensure its text will still be readable. The snippet below sets it at 30em (based on the code in the question having a minimum height of 25em)
Although we want the height of each img to be the same, say a % of the article height, we need to ensure that the whole of the img is always viewable, without distortion or cropping. This snippet changes the HTML so that the img element becomes a div with fixed dimensions and the image is used as a background, centered both horizontally and vertically and with size contain. (see below for alternative).
Altering the font size I think requires Javascript. This snippet looks at the height of the text div and if it's too tall alters the font size until it fits. You may want to put a different limit on it so that it is always readable, even if that means occasionally the user having to scroll.
const articles = document.querySelectorAll('.grid > article');
articles.forEach(article => {
const articleH = article.offsetHeight;
let h = article.querySelector('.text').offsetHeight;
var fontSize = 0.9;
while (h > articleH/2) {//NOTE assumes the img is 50% alter if it is something else
article.querySelector('.text').style.fontSize = fontSize + 'em';
h = article.querySelector('.text').offsetHeight;
if (fontSize <= 0.2) break;
fontSize = fontSize - 0.05;
}
});
body {
font-family: Helvetica, sans-serif;
width: 100vw;
}
header, footer {
background-color: #7690AC;
color: #FFFFFF;
padding: 20px;
padding-bottom: 20px;
}
.content {
padding: 10px;
margin-bottom: 10px;
margin-left: 20px;
}
.grid {
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
align-items: center;
}
.grid > article {
border: 1px solid #333;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
/* min-height: 25em; */
height: 30em; /* ADDED */
top: -10px;
}
.grid > article .img {
width: 100%;
height: 50%;
background-size: contain;
background-position: center center;
background-repeat: no-repeat no-repeat;
margin-bottom: 12px;
}
.text {
font-size: 1em;
/*transform: scaleX(1.2) scaleY(1);*/
margin-left: 25px;
width: 270px;
}
.text {
padding: 0 10px 20px;
}
.text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
h3.price {
text-align: center;
}
.cards {
grid-template-columns: repeat(2, 1fr);
border-collapse: collapse;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
p.address, p.phoneno {
font-size: 18px;
font-weight: 900;
line-height: 12px;
}
☎:before {
font-size: 14px;
}
<header>
<h1>YOURMOTORHOMES</h1>
<h2>Axtley Road, Penderton XX1 1XA</h2>
<h2>01634 00000</h2>
</header>
<div class="content">
<p>Welcome to YourMotorhomes!</p>
</div>
<main class="grid">
<article>
<div class="img" style="background-image: url(https://i.imgur.com/PApYyjj.jpg)" alt="Elddis Autoquest"></div>
<div class="text">
<p><b>2020 70 ELDDIS AUTOQUEST 194 2.2 HDi 140 LOW PROFILE MOTORHOME PEUGEOT BOXER CHASSIS</b>
4 berth, end washroom, white, 100 litre fresh water, 70 litre waste water, 3 ring hob, OG cooker, 155 litre fridge, 600 miles, almost as new, <b class="price">£44895</b></p>
</div>
</article>
<article>
<div class="img" style="background-image: url( https://i.imgur.com/h7Cujxy.jpg" alt="Dethleffs Esprit)"></div><em>Image for illustration purposes only</em>
<div class="text">
<p><b>2014 64 DETHLEFFS i6810 ESPRIT 2.3 MULTIJET 130 A-CLASS FIAT DUCATO MOTORHOME</b>
4 berth, 4 belted seats A-class motorhome finished in Diamodn White, fixed single bed layout, 3 ring cooker, fully loaded spec, 28,000 miles <b class="price">£62115</b></p>
</div>
</article>
<article>
<div class="img" style="background-image: url(https://i.imgur.com/TfuaqVa.jpg)" alt="Burstner Aviano"></div>
<div class="text">
<p><b>2009 59 BURSTNER AVIANO i725 3.0 MULTIJET 180 FIAT TD</b>
4 berth, gold, island bed layout, 3 ring hob, 150 litre fridge, 7.45m length, 2.30m width <b class="price">£44995</b></p>
</div>
</article>
<article>
<div class="img" style="background-image: url(https://i.imgur.com/oUWFVub.jpg);" alt="Burstner Nexxo"></div>
<div class="text">
<p><b>2009 58 BURSTNER NEXXO FAMILY A645 2.2 TDCi</b>
6 berth, 6 belted seats, end bedroom, blue, Layout - Over Cab Double, Centre Dinette Double, Rear Bunk beds, 2 Owners from New, Good Service History, Cab Air Conditioning, Gaslow Refillable LPG System, Truma Blown Air Combination Boiler, HPI Clear, Roof Rails, Large Garage - if not using bottom bunk, Awning,MOT 17/12/2021, 11 Service Stamps in the book, Last Damp check 01/21, GVW 3500kg, Length 6.56m, Width 2.30m, Height 3.0m, only 20,747 miles, registered 30/01/2009, MoT due in Oct' 21. DUE THIS WEEK. A GREAT EXAMPLE OF THIS BURSTNER MOTORHOME, MUST BE SEEN NOW, YOU WILL NOT FIND BETTER
<b class="price">£35000</b></p>
</div>
</article>
</main>
<footer>
content
</footer>
An alternative to contain on the background size could be cover - if you were absolutely sure that the motor was central in each image and the aspect ratio such that it would fit OK. This runs a risk that not all the van will show though, but it gives a more consistent solid look to the top part of the article.
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 :)!
I am working on a Joomla 2.5 based English-Thai website. There is a menu item in Thai in a hidden menu. This menu item is starred and so when the website is accessed, the Thai page is displayed. There is also an similar menu item in English. The two pages can be accessed one from the other by buttons.
As can be seen in the images, while the Thai page displays full width, the English page does not. The problem seems to be dependent on starring, since swapping the starring over to the English menu item results in the English page being displayed full width, and the Thai page narrowed
I've looked thru the Joomla backend for any clues as to why this is happening, but I can't see any. Any help would be much appreciated.
EDIT
Here is part of the markup and CSS for the 2 pages
HTML - Thai page
<div id="front_page">
<div><span id="btn_text">english</span></div>
<div id="fp_container">
<!-- flex container -->
<div id="fp_logo">
<!-- first flex item containing the e2tw logo -->
<img class="fpm_image" src="/templates/beez_20/images/e2tw/e2tw_logo1.svg" />
<p class="fp_content1">english2theworld</p>
<p class="fp_content2">สำหรับผู้ที่ต้องการเรียนภาษาอังกฤษ</p>
<div class="fp_login"> {loadmodule mod_login}</div>
</div>
<div id="intro_container1">
<div id="intro_outliner">
<div id="intro_item1" class="intro_items intro_item_1 intro_item_eng">
<p id="intro_head1" class="intro_content fp_heading"><span class="intro_head_title">เชิญเข้าสู่ โปรแกรม <span class="e2tw_text">english2theworld</span></span></p>
<ul class="fp_lists fa-ul icon-star">
<li class="fp_list_text ">โปรแกรม english2theworld เป็นการวางรากฐานด้วยการสอนภาษาอังกฤษด้วยการฝึกหัดที่นำสมัย</li>
<li class="fp_list_text ">english2theworld นำสมัยในด้านการสื่อสารด้วยเทคโนโลยีที่ช่วยให้นักเรียนเรียนรู้ในการพูด การอ่านและการเขียนภาษาอังกฤษเป็นไปได้โดยเห็นผลอย่างรวดเร็วและมีประสิทธิภาพ</li>
</ul>
</div>
<!-- markup deleted here similar to the abaove -->
</div>
</div>
</div>
</div>
HTML - English page
<div id="front_page">
<div><span id="btn_text">อังกฤษ</span></div>
<div id="fp_container">
<!-- flex container -->
<div id="fp_logo">
<!-- first flex item containing the e2tw logo -->
<img class="fpm_image" src="/templates/beez_20/images/e2tw/e2tw_logo1.svg" />
<p class="fp_content1">english2theworld</p>
<p class="fp_content2">for all who want to learn English</p>
<div class="fp_login"> {loadmodule mod_login}</div>
</div>
<div id="intro_container1">
<div id="intro_outliner">
<div id="intro_item1" class="intro_items intro_item_1 intro_item_eng">
<p id="intro_head1" class="intro_content fp_heading"><span class="intro_head_title">WELCOME T0 <span class="e2tw_text">english2theworld</span></span></p>
<ul class="fp_lists fa-ul icon-star">
<li class="fp_list_text ">english2theworld is based on sound teaching practice</li>
<li class="fp_list_text ">english2theworld uses interactive web technology to help students learn to speak, read and write English as quickly and efficiently as possible</li>
</ul>
<!-- markup deleted here similar to the abaove -->
</div>
</div>
</div>
</div>
CSS
div#fp_container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
padding-bottom: 1%;
}
div#fp_logo {
order: 0;
flex: 1 1 auto;
align-self: auto;
width: 35%;
border: 1px solid #000093;
margin: 0 0 0 4%;
background: #EFF1FF;
}
div#fp_logo img.fpm_image {
width: 70%;
height: auto;
margin: auto auto;
display: block;
margin-top: 5%;
}
p.fp_content1, p.fp_content2 {
font-family: 'Baumans', cursive;
font-weight: 600;
color: #000093;
text-align: center;
}
p.fp_content1 {
font-size: 1.9em;
margin: 1% 0 1% 0;
}
p.fp_content2 {
font-size: 1.4em;
margin: 0 0 1% 0;
}
div.fp_login {
margin: 10% 2% 5% 2%;
}
div.fp_login fieldset.userdata ul {
margin: 0;
}
div.fp_login li {
font-size: 0.5em;
}
div#intro_container1 {
flex: 2 1 auto;
display: flex;
flex-flow: column wrap;
// justify-content: flex-start;
// align-content: center;
//align-items: baseline;
// margin: 2% 5% 5% 2%;
width: 95%;
}
div.intro_outliner {
border: 1px solid #000093;
}
div#intro_item1, div#intro_item2, div#intro_item3,
div#intro_item4, div#intro_item5 {
order: 0;
flex: 0 1 90%;
width: 87%;
margin: 0 0 2% 5%;
background: #EFF1FF;
}
I hope this helps. Thank you for your interest.