I want my image and text to be responsive, I have added image for the format I need, but I used some coding and I'm not able to do it the right way. Please can someone help me out here?
I have this format here for desktop version
and this is what I see in tablet for screen 768
now I want in tablet to be similar as in desktop
#media (min-width:641px) {
.home-top{
background: url(../../images/index/u155.png);
background-position: center;
background-repeat: no-repeat;
min-height: 280px;
color:#fff;
padding-top: 30px;
padding-bottom: 30px;
}
}
<div class="home-top ">
<div class="container">
<div class="lg-container">
<div class="lg-container">
<div class="row">
<div class="col-md-4 "><img src="<?php echo URL ?>public/images/image_directeur.png" class="director-img"></div>
<div class="col-md-8 ">Mot de l’Inspecteur Général en charge de l'IGF <br><br>Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur général Mr Salomon Jude Alix Patrick... Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur Général Mr Guy Romero LATRY...
<br><br>
Guy Romero LATRY <span style="float: right;"><button class="home-top-btn">Lire l'article >></button></span>
</div>
</div>
</div>
</div>
</div>
</div>
The col-md-* works for screen widths higher than 992px.
You should add `col-sm-4' to the first column div and 'col-sm-8' to the second. Add, not replace.
This should work to get the proportions right on smaller screens.
Related
I'm creating a website for a class and I need a part of the <p> to have a certain padding but it's only applying to the first line.
The HTML is :
<p>
Some text
<span class="tabulation">
Une ambiance conviviale
<br>
Durant l'été, une grande terrasse ensoleillée
<br>
En hiver, une verrière chauffée
<br>
De l'espace de stationnement
<br>
Un chef cuisinier d'expérience
<br>
Des salles privées pour les repas de groupe
<br>
Un menu pour enfant
<br>
Une vue sur le fleuve
</span>
</p>
What happens is that the span only applies to the first line. I know it's from the br, but I don't know how could I make it work. Thank you
Depending on what you're trying to achieve, try making your span display:block or display: inline-block
.tabulation {
padding: 2em;
display: block;
}
<p>
Some text
<span class="tabulation">
Une ambiance conviviale
<br>
Durant l'été, une grande terrasse ensoleillée
<br>
En hiver, une verrière chauffée
<br>
De l'espace de stationnement
<br>
Un chef cuisinier d'expérience
<br>
Des salles privées pour les repas de groupe
<br>
Un menu pour enfant
<br>
Une vue sur le fleuve
</span>
</p>
Also, see understanding inline box model
Rather than relying on the <br/> element - I would use spans with display: block applied to them - this will force them to be on individual lines and will allow you to apply styling directly to them for the padding etc.
Alternatively - if the children items are a list with the text at the top as a heading - you could use a <ul> or a <dl>. The advantage of a <dl> is that you get the <dt> element to provide the headings and the <dd> elements are already block level elements so you just need to space them out as desired.
.tabulation span {
display: block;
padding: 8px 16px;
}
.tabulation dd {
padding: 8px 16px;
margin: 0
}
<p class="tabulation">
Some text (using spans to show the items)
<span>Une ambiance conviviale</span>
<span>Durant l'été, une grande terrasse ensoleillée</span>
<span>En hiver, une verrière chauffée</span>
<span>De l'espace de stationnement</span>
<span>Un chef cuisinier d'expérience</span>
<span>Des salles privées pour les repas de groupe</span>
<span>Un menu pour enfant</span>
<span>Une vue sur le fleuve</span>
</p>
<hr/>
<dl class="tabulation">
<dt>Some text (using a DL to show the items)</dt>
<dd>Une ambiance conviviale</span>
<dd>Durant l'été, une grande terrasse ensoleillée</dd>
<dd>En hiver, une verrière chauffée</dd>
<dd>De l'espace de stationnement</dd>
<dd>Un chef cuisinier d'expérience</dd>
<dd>Des salles privées pour les repas de groupe</dd>
<dd>Un menu pour enfant</dd>
<dd>Une vue sur le fleuve</dd>
</dl>
I want to know how can I move this text next to an image! I don't know how I made it with the first pic, but I couldn't with the second.
p.mytext {
color: aliceblue;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
border: 2px solid;
border-color: whitesmoke;
margin-left: 90px;
margin-right: 750px;
margin-bottom: 150px;
font-family: Lucida Sans Unicode;
}
p.secondtext {
color: white;
border: 2px solid;
border-color: whitesmoke;
font-family: Lucida Sans Unicode;
padding-left: 15px;
padding-right: 15px;
margin-left: 90px;
margin-right: 500px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<img class="clip" src="../images/clip.png" width="300">
<body id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<img class="picofme" src="../images/juli.JPG" width="400">
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me
what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing
is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the
film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps
every day"</p>
<img class="china" src="../images/china.JPG" width="450">
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después
de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como
nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra
los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</body>
</html>
i suppose you want to this.
.flex {
display:flex;
margin: 20px 0;
}
.flex img {
margin:0 20px 0 0;
}
.flex p {
border: 2px solid;
border-color: whitesmoke;
padding:20px;
margin:0;
}
<img class="clip" src="https://picsum.photos/300/100">
<body id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<div class="flex">
<img class="picofme" src="https://picsum.photos/300/300" width="400" >
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps every day"</p>
</div>
<div class="flex">
<img class="china" src="https://picsum.photos/300/300" width="450">
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</div>
</body>
A couple of pointers to mention:
The body tag does not need an id, the id should be added to a
div tag within the body
Your first image is above the body tag, remember to include all of
your content html within the body
Your paragraphs have many similar style property values, consider
making a class for these. You can add more than one class to a tag.
Avoid adding inline css: your img widths are very similar in width.
For demo purposes, I have created a class with width of 425 (midway) and
removed the 400/425 inline style
I commented out margins that were throwing out position, and changed the color text to black for the paragraphs (just so I could see it!)
The bottom img classes (in my code) that are commented out are examples of css that you could use for your images. The img css that affects the snippet is in the second line.
#aboutme{float:left;}
p{color:#000000; width:60%; display:inline-block; float:right;}
img{max-width:32%; padding:30px 25px; float:left; height:auto; vertical-align:middle;}
p, img{ display:inline-block; vertical-align:top;}
.mytext {
/*color: aliceblue;*/
padding: 15px;
border: 2px solid;
border-color: whitesmoke;
/*margin-left: 90px;
margin-right: 75px;
margin-bottom: 150px;*/
font-family: Lucida Sans Unicode;
}
.secondtext {
/*color: #ffffff;*/
border: 2px solid;
border-color: whitesmoke;
font-family: Lucida Sans Unicode;
padding-left: 15px;
padding-right: 15px;
/*margin-left: 90px;
margin-right: 500px;*/
/*float: left;*/
}
/*.picofme{width:400px;height:auto;}
.china{width:450px;height:auto;}*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<img id="clip" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<div id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<img class="picofme" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me
what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing
is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the
film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps
every day"</p>
<img class="china" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después
de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como
nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra
los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</div>
</body>
</html>
Good luck
I am a beginer but I already made websites so, I know HTML, CSS, and working with servers and FTP.
I was working on my html, and some weiiiird thing happenned to me (for me, as I really don't understand what is happening, it is weird...)
So, Localy, my images in the section "projets" shows, as asked by the code.
BUT, on my server, the images won't show. They are IDENTICAL lines, the images ares correctly named (01.jpg.02.jpg...) and placed on the server, the images 1 and 4 shows correctly, but the others, nope. I tried to copy/past the line from picture 1 to the picture 2 line and, the site shows picture 1 two times, so, I really don't understand at all what is wrong...
my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Agency</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<header style="background-color: #fafafa"> <!-- entête du site, contiendra le menu de navigation ainsi que le carrousel-->
<nav class="nav" role="navigation"> <!-- navigation-->
<img src="./webagency_images/images/logo.png" />
<ul clas="menu">
<li>Accueil</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div id="slider"> <!-- carrousel-->
<figure>
<img src="./webagency_images/images/slider/bg1.jpg" alt="Images Slider">
<img src="./webagency_images/images/slider/bg2.jpg" alt="Images Slider">
</figure>
<figcaption><h1><span style="color:#62a8d0">WEBAGENCY</span> : L'AGENCE DE TOUS VOS PROJETS!</h1><p>Vous avez un projet Web? La WebAgency vous aide à le réaliser!</p><br/><br/>
<button class="button" type="button">Plus D'infos</button>
</figcaption>
</div>
<!-- navigation dans le carrousel-->
<div class="slider_navigation">
<div class="fa fa-chevron-left" aria-hidden="true"></div>
<div class="fa fa-chevron-right" aria-hidden="true"></div>
</div>
</header>
<!-- section services de la page du site-->
<section class="services">
<h1 style="text-align: center">NOS SERVICES</h1>
<div class="point_bleu"></div>
<hr/>
<p class="bloc_centre">Nous proposons les meilleurs services et en plus, aux meilleurs prix!! Nous avons une équipe de professionnels tous prêt à accueillir votre projet et lui donner vie selon vos souhaits. N'hésitez pas à nous contacter pour un devis, un projet web ou pour un magasin web. Les éléments pris en charge par l'UX vont de la partie commerciale à l'accessibilité.</p><br/>
</div>
<div class="assides">
<img src="./webagency_images/images/main-feature.png" />
<div class="blocs"><h1>UX Design</h1>
<p><b>U</b>ser e<b>X</b>périence : son rôle à pour but de faire la liaison entre l'interface construite, et l'utilisateur. Il est chargé de rendre l’expérience d'utilisation fluide, simple, intuitive, de faciliter l'utilisation de l'utilisateur, de réfléchir pour lui à tout ces moyens là d'avoir la meilleure expérience possible sur son support.</p>
<div class=""><h1>UI Design</h1>
<p><b>U</b>ser <b>I</b>nterface : son rôle est là pour rendre accessible, optimale et facile, l'accès et l’exécution des dispositifs liés à l'interface des applications et machines.</p>
</div>
<div class=""><h1>SEO</h1>
<p><b>S</b>earch <b>E</b>ngine <b>O</b>ptimization : son rôle est d'optimiser au mieux le référencement des outils web, d'un site... Le travaille se fait sur les mots clés, la sémantique, l'étude de la concurrence, du marché actuel et doit être fait régulièrement pour mettre à jour les données importantes au référencement.</p>
</div>
</div>
</section>
<!-- section portfolio de la page du site -->
<section class="projets">
<h1 style="text-align: center">NOS PROJETS</h1>
<div class="point_bleu"></div>
<hr/>
<p class="bloc_centre">Lorem Ipsum et tout le tralala blablabla à remplir plus tard.</p><br />
<div class="row">
<div><img src="./webagency_images/images/portfolio/01.jpg" alt="Image1"/></div>
<div><img src="./webagency_images/images/portfolio/02.jpg" alt="Image2"/></div>
<div><img src="./webagency_images/images/portfolio/03.jpg" alt="Image3"/></div>
<div><img src="./webagency_images/images/portfolio/04.jpg" alt="Image4"/></div>
</div>
<div class="row">
<div><img src="./webagency_images/images/portfolio/05.jpg" alt="Image5"/></div>
<div><img src="./webagency_images/images/portfolio/06.jpg" alt="Image6"/></div>
<div><img src="./webagency_images/images/portfolio/07.jpg" alt="Image7"/></div>
<div><img src="./webagency_images/images/portfolio/08.jpg" alt="Image8"/></div>
</div>
</section>
<!-- bas de page contenant un iframe google maps et un formulaire de contact-->
<footer>
<form method="post">
<div>
<h1>Contact Info</h1>
<h4>WebAgency SAS<br /> 25 rue d'Hauteville 75010 Paris<br /> Tel : 01 02 03 04 05</h4>
</div>
<label for="Nom"></label>
<input type="text" name="Nom" placeholder="Nom"><br/>
<label for="E-mail"></label>
<input type="text" name="E-mail" placeholder="E-mail"><br />
<label for="Sujet"></label>
<input type="text" name="Sujet" placeholder="Sujet"><br />
<label for="Message"></label>
<textarea type="text" rows="10" cols="35" placeholder="Votre message"></textarea><br />
<input class="button" type="submit" value="Envoyer" style="width: 50%">
</form>
<div class="google_iframe">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11139.440186098542!2d4.878186999999999!3d45.73390145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1524499866273" width="100%" height="650" frameborder="0" style="border:0; opacity: 0.7" allowfullscreen></iframe>
</div>
</footer>
</body>
</html>
The link to my website page :
http://web-tool-box.com//openclassrooms/projets/webagency/webagency.html#
Am I making some "stupid junior mistake"?
How to ensure that the text does not exceed the gray border, and there is no scroll bar?
Edit I think that the problem is comming from the width of <td class="message">. i've also updated the HTML and CSS code.
Here is the code of that area
HTML
<div class="liste_posts">
<table>
<tr>
<td class="message">
<div class="topic_div">Si vous êtes sur cette page, c'est parce que vous avez décidé de laisser tomber phpbb, ou autre, pour vous lancer dans l'aventure qu'est la création d'un forum. Et ça tombe bien, parce que justement, ici on va voir comment faire ça Smiley. Il faut, avant de commencer, que vous sachiez que je vais montrer comment réaliser une base que vous pourrez ensuite faire évoluer comme bon vous semblera.</div>
</td>
</tr>
</table>
CSS
.message{
background-color: rgb(244, 238, 250);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.topic_div p {
word-break: break-all;
}
Thanks in advance.
Try to use two different divs, one for the left side and one for the right side. Write text inside the left one.
Hopefully that will work for you.
Try setting a width of the box using the max-width and min-width css properties
I just read the answer below me, this would be an extension of that
I have experience in web development but zero experience in mobile development. I have therefore purchased a website template (html5 +css3) and I then used it as a starting point for a PHP website.
Some of the pages are not working very well on mobile though. When I test this page, the text is not sizing to the mobile screen. Even worse, when I go into Reader mode on iOS, there's just this big image of silver rings showing, instead of the actual text.
How can this be fixed ?
The code responsible for showing a block of text is the following:
<div class="container">
<div class="content_block row">
<div class="fl-container span9">
<div class="row">
<div class="posts-block span12">
<div class="contentarea">
<div class="row-fluid">
<div class="span12 module_cont module_text_area module_medium_padding">
<h3 class="headInModule"></h3>
<p>Les prestations commencent à partir de 250 euros.</p>
<p>Lors de ma prestation, je suis à votre entière disposition pendant un
nombre d’heures qui varie en fonction de la formule choisie. </p>
<p>Je m’engage à délivrer les photos dans un délai de 4 semaines suivant le
mariage.</p>
<p>Les frais de déplacement sont inclus dans la région Alsace-Lorraine,
Luxembourg et Province Luxembourg en Belgique. Pour toute autre région,
veuillez me contacter.</p>
</div>
</div>
<!-- .row-fluid -->
<div class="row-fluid">
<div class="span12 module_cont module_text_area module_medium_padding">
<img src="/img/bronze.jpg" alt="formule bronze"
style="float:left"/>
<div style="float:right">
<h3 class="headInModule">Formule Bronze</h3>
<a id="anchor1"></a>
<ul class="list_type1">
<li>6H de prestation le jour du mariage * (plage horaire à préciser
avec les mariés)
</li>
<li>Rencontre des futurs mariés avant le mariage et signature du
contrat de prestation
</li>
<li>La prestation comprend un photo reportage permettant de couvrir
les thèmes suivants:
<ul>
<li>préparatifs (habillage, maquillage, coiffeur)</li>
<li>cérémonie</li>
<li>photos de couple ou/et de groupe</li>
<li>vin d’honneur</li>
</ul>
</li>
<li>Travail de post-production et de retouches</li>
<li>1 DVD contenant les photos retravaillées en haute résolution
(min. 150 photos)
</li>
<li>Galerie photo internet sécurisée et disponible pendant 1 an
minimum.
</li>
<li>Cession intégrale des droits de reproduction dans un cadre privé
uniquement.
</li>
</ul>
<i>prix sur demande</i>
</div>
</div>
</div>
<!-- .row-fluid -->
Your classes .span9 and .span12 has a width of 700px and 940px which is stretching your content. If you set these to 100% in your media queries it should work.
e.g.
#media only screen and (max-width: 770px){
.span9, .span12 {width:100%;}
}