I'm trying to scroll down with the following website, in a mobile view and I can't, any suggestions?
The thing is that I understand that this may be happening due to the menu I'm using but I'm not able to make it scroll as a normal in HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400' rel='stylesheet' type='text/css'>
<!-- build:js modernizr.touch.js -->
<script src="elastic/modernizr.touch.js"></script>
<!-- endbuild -->
<link href="elastic/index.css" rel="stylesheet">
<!-- build:css mfb.css -->
<link href="elastic/mfb.css" rel="stylesheet">
<!-- endbuild -->
<link rel="stylesheet" href="elastic/style.css">
<style>
.ion-location{
color : #FB0000;
}
.ion-social-facebook{
color : #3b5998;
}
.ion-social-googleplus{
color : #d34836;
}
.ion-social-instagram-outline{
color : #3f729b;
}
</style>
</head>
<body>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="elastic/ionic.css" rel="stylesheet">
<script src="elastic/ionic.bundle.js"></script>
<ion-header-bar class="bar-positive bar bar-header disable-user-behavior" >
<h1 class="title">Sobre mí</h1>
</ion-header-bar>
<ion-content delegate-handle="example-scroller" elastic-header="example-elastic-header" overflow-scroll="false" class="scroll-content ionic-scroll has-header"><div class="scroll" style="transform: translate3d(0px, -1px, 0px) scale(1);" >
<div id="example-elastic-header" class="background-image" style="transform-origin: center bottom 0px; transform: translate3d(0px, 0.5px, 0px) scale(1, 1); background-image: url("los7aguacates.jpg");"></div>
<div class="content">
<div class="padding">
<h1>Los 7 aguacates </h1>
<p>Mi vida ha estado siempre marcada por mis grandes amores y pasiones:<br><br>
- La nutrición, y la posibilidad de “curar lo incurable” a través de una alimentación adecuada.<br><br>
- La gente, y la posibilidad de mejorar su vida, aumentar la autoestima, transformar la mente y acompañar a las personas durante el proceso de cambio mientras observo los maravillosos pasos hacia la salud y el bienestar.<br><br>
- Mi país, Polonia y España, que por elección es mi segunda casa.<br><br>
- Los aguacates, que no sé muy bien por qué, pero se han hecho una parte inseparable de mí ;)
"</p>
<p>Justo por eso estoy donde estoy, hago lo que hago y …!quiero seguir! </p><p>
Todos tenemos el poder de impactar en la vida de otra persona. ¿Por qué no aprovecharlo para mejorar la salud y la calidad de vida de los demás? Quiero que la buena alimentación se haga viral (¡ya ves que necesito tu ayuda para ello!) e impacte en todas las personas, mostrando también a los peques (¡que son las nuevas generaciones!) qué significa comer bien y cómo. A través de una vida saludable, se pueden evitar muchos problemas de salud.
</p><p>Únete a mi movimiento, al movimiento de los7aguacates, un movimiento que promueve la alimentación sana como forma de vida, como base para una existencia más plena y feliz. ¡Un movimiento que quiere “curar lo incurable”! Comiendo bien, compartiendo recetas, dando ejemplo tú también impactas positivamente en los demás, ¿quieres ser mi ayudante? Te necesito, necesito tu impacto para llegar a otras personas. ¡Formemos un equipo! Comer bien es fácil y divertido. ¡Yo te lo mostraré!</p>
</div>
<div class="list">
</div>
</div>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="transform: translate3d(0px, 1px, 0px) scaleY(1); height: 356px;"></div></div></ion-content>
<ul id="menu" class="mfb-component--tr mfb-fountain " data-mfb-toggle="hover">
<li class="mfb-component__wrap">
<a href="#" class="mfb-component__button--main">
<i class="mfb-component__main-icon--resting ion-navicon-round"></i>
<i class="mfb-component__main-icon--active ion-close-round"></i>
</a>
<ul class="mfb-component__list">
<li>
<a href="external://https://www.facebook.com/los7aguacates/" data-mfb-label="Sígueme en Facebook" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-facebook"></i>
</a>
</li>
<li>
<a href="external://https://www.instagram.com/los7aguacates/" data-mfb-label="Sígueme en Instagram" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-instagram-outline"></i>
</a>
</li>
<li>
<a href="external://https://play.google.com/store/apps/details?id=com.mubiquo." data-mfb-label="Valora la app" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-heart"></i>
</a>
</li>
</ul>
</li>
</ul>
<section id="panel" class="panel">
</section>
<!-- build:js mfb.js -->
<script src="elastic/mfb.js"></script>
<!-- endbuild -->
<script>
var panel = document.getElementById('panel'),
menu = document.getElementById('menu'),
showcode = document.getElementById('showcode'),
selectFx = document.getElementById('selections-fx'),
selectPos = document.getElementById('selections-pos'),
// demo defaults
effect = 'mfb-zoomin',
pos = 'mfb-component--br';
showcode.addEventListener('click', _toggleCode);
selectFx.addEventListener('change', switchEffect);
selectPos.addEventListener('change', switchPos);
function _toggleCode() {
panel.classList.toggle('viewCode');
}
function switchEffect(e){
effect = this.options[this.selectedIndex].value;
renderMenu();
}
function switchPos(e){
pos = this.options[this.selectedIndex].value;
renderMenu();
}
function renderMenu() {
menu.style.display = 'none';
// ?:-)
setTimeout(function() {
menu.style.display = 'block';
menu.className = pos + effect;
},1);
}
</script>
<script src="elastic/index.js"></script>
</body>
</html>
Related
I am creating a website that has a header, a sidebar on the left, a main content at the center, where information will be displayed, a right side-bar, and a footer that will contain an image or something. The header and footer were left out of the grid template.
For this question I am focusing only on the following classes: .sidebar(left-sidebar aka a table of content or index), .contenido-carrera(information displayed), and .publicidad(right-sidebar)
All the sections were defined by using this piece of CSS
.carrera-grid {
margin: 120px 12px;
display: inline-grid;
grid-template-columns: 230px fit-content(80ch) 170px;
grid-gap: 10px;
}
You can tell the content in the center is by far the largest. First sidebar will contain a list of elements like "Table of contents" on Wikipedia, and the one with 170px will be kept for publicity.
.sidebar {
display: inline-block;
position: relative;
top: 50px;
}
.publicidad {
border: 1px solid black;
text-align: center;
display: inline-block;
position: relative;
display: flex;
justify-content: start;
align-items: center;
left: 10px;
top: 50px;
flex-flow: column;
}
.publicidad > div {
height: 200px;
border: 1px solid blue;
width: 120px;
margin: 6px;
}
I tried to set display:flex just on the centered element, .contenido-carrera but this makes a undesired/unwanted layout/design, makes all items to lose their width and space between them while not using the fixed space that was intended on the grid.
.contenido-carrera {
text-align: justify;
display: inline-block;
position: relative;
bottom: 90px;
}
https://streamable.com/b6itn
As you can see, the item on the centered element is affected by an overflow within itself. So how can I make this as responsive as possible? Thought of using media-queries but am currently running bootstrap on this page, so I wouldn't like to get in the way of that.
Like previously mentioned the header and footer were left out of the grid-template.
<main class="carrera-grid">
<div class="sidebar">
<ol>
<label>Tabla de Contenidos</label>
<li>¿Qué es la Mercadotecnia?</li>
<li>Objetivos de la Mercadotecnia</li>
<li>Tipos de Mercadotecnia</li>
<li>Importancia de la Mercadotecnia</li>
<li>Para qué nos Sirve la Mercadotecnia</li>
<ul> <!-- Inicio de PRIMERA subdivision de lista-->
<li>Crear una imagen corporativa</li>
<li>Atraer clientes</li>
<li>Mejora la estrategia de publicidad</li>
<li>Tomar decisiones</li>
</li>
</ul> <!-- Fin de PRIMERA subdivision de lista-->
<li>Ejemplos de Mercadotecnia</li>
<ol> <!-- Inicio de SEGUNDA subdivision de lista-->
<li>Uber</li>
<li>Whirlpool</li>
<li>Andes Bar 45</li>
<li>Netflix</li>
<li>Walmart</li>
</ol> <!-- Fin de SEGUNDA subdivision de lista-->
<li>Cuáles son los elementos de un Plan de Mercadotecnia o Plan de Marketing</li>
<ol> <!-- Inicio de TERCERA subdivision de lista-->
<li>Investigación</li>
<li>Producto</li>
<li>Análisis de la competencia</li>
<li>Presupuesto</li>
<li>Precio, posicionamiento y marca</li>
<li>Traza objetivos reales</li>
<li>Monitorea y analiza los resultados</li>
</ol> <!-- fIN de TERCERA subdivision de lista-->
<li>Cómo definir una estrategia de Marketing Online</li>
<li>Conclusión</li>
</ol>
</div>
<div class="contenido-carrera">
<h1>¿Qué es la Mercadotecnia?</h1>
<p style="font-weight: bold;">La mercadotecnia es un conjunto actividades que se realizan para identificar las necesidades de un
público determinado con el objeto de brindarle productos o servicios para satisfacerlos de la forma más adecuada.</p>
<p>La mercadotecnia se encarga del proceso de planificación de las actividades de la empresa en relación con: el precio, la promoción,
distribución y venta de bienes y servicios que ofrece.</p>
<p><strong>Ayuda a definir el producto o servicio de acuerdo con las preferencias de los consumidores con el fin de acelerar el proceso de compras.</strong>
De esta manera se podrá crear un intercambio entre las empresas y consumidores que satisfaga los objetivos de ambas partes.<br>
<br>Philip Kotler, el gurú del marketing, dice que la mercadotecnia es:
<div class="frase">
<p>“El proceso social y administrativo por el cual los grupos e individuos<br>
satisfacen sus necesidades al crear e intercambiar bienes
y servicios”</p>
</div><br>
Según la Asociación Americana de Marketing (AMA, por sus siglas en inglés)<br>
<br>
<div class="frase-lg">
<p>“la actividad, el conjunto de instituciones y los procesos para crear,
comunicar, entregar e intercambiar ofertas que tienen valor para los
clientes, clientes, socios y la sociedad en general.”
</p>
</div><br>
Por su parte, William J. Stanton dice que la mercadotecnia se refiere:<br>
<br><div class="frase">
<p>“al desarrollo de las actividades del negocio que dirigen el flujo de
mercancías y servicios del productor hacia el consumidor o usuario.”</p>
</div><br>
Finalmente, Martin L. Bed conceptualiza la mercadotecnia como aquellas “actividades integradas de una empresa, dirigidas hacia la satisfacción de las necesidades
de los clientes con un margen de utilidad.”
<br>En resumen, la mercadotecnia implica la incorporación de una serie de técnicas, estrategias y prácticas cuyo objetivo principal es agregar valor a las diferentes marcas o productos a fin de satisfacer las necesidades de los consumidores.
</p>
</div>
<div class="publicidad">
<div class="publicidad-1">Publicidad</div>
<div class="publicidad-2">Publicidad</div>
</div>
</main>
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"?
I'm supposed to reproduce the image below, and I was doing great so far, but can't seem to align my images well, and can't set up the top menu properly.
I should also be able to "paint" the image background green, but have no idea how to do so.
How can I achieve that?
body {
background-color: #dff0d8;
}
h1 {
background-color: green;
}
#outros {
background-color: black;
}
#texto1 {
float: left;
width: 30%;
}
#texto2 {
float: left;
width: 30%;
}
#texto3 {
float: left;
width: 30%;
}
img {
border-radius: 10%;
}
#preto {
background-color: green;
}
<link href="//www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<h2 id="outros">
<font color="white">
<div id="preto">Home</div>Museus <br/> Monumentos <br/> Restaurantes </font>
</h2>
<h1>
<font color="white"> A cidade de Lisboa </font>
</h1>
<div id="texto1">
<h3> Introdução </h3>
<p>
Lisboa GCTE é a capital de Portugal e a cidade mais populosa do país. Tem uma população de 506 892 habitantes, dentro dos seus limites administrativos. Na Área Metropolitana de Lisboa, residem 2 821 697 pessoas (2011), sendo por isso a maior e mais populosa
área metropolitana do país. Lisboa é o centro político de Portugal, sede do Governo e da residência do chefe de Estado. É o "farol da lusofonia" (Daus): a Comunidade dos Países de Língua Portuguesa (CPLP) tem a sua sede na cidade. É ainda a capital
mais a ocidente do continente europeu na costa atlântica.
</p>
</div>
<div id="texto2">
<h3> Globalidade </h3>
<p>Lisboa é considerada como cidade global devido à sua importância em aspectos financeiros, comerciais, mediáticos, artísticos, educacionais e turísticos. É um dos principais centros económicos do continente europeu, graças a um progresso financeiro crescente
favorecido pelo maior porto de contentores da costa atlântica da Europa e mais recentemente pelo Aeroporto Humberto Delgado, que recebe mais de 20 milhões de passageiros anualmente (2015). Lisboa conta com uma rede de auto-estradas e um sistema de
ferrovias de alta velocidade (Alfa Pendular), que liga as principais cidades portuguesas à capital.
<br/> A cidade é a sétima mais visitada do sul da Europa, depois de Istambul, Roma, Barcelona, Madrid, Atenas e Milão, com 1 740 000 de turistas em 2009, tendo em 2014 ultrapassado a marca dos 3,35 milhões. A nível global, Lisboa foi a 35.ª cidade
com maior destino turístico em 2015, cerca de 4 milhões de visitantes. Em 2015, foi considerada a 11.ª cidade turística mais popular, à frente de Madrid, Rio de Janeiro, Berlim e Barcelona.
</p>
</div>
<div id="texto3">
<h3> Riqueza </h3>
<p>
A região de Lisboa é a mais rica do país, com um PIB PPC per capita de 26 100 euros (4,7% maior do que o PIB per capita médio da União Europeia). A sua área metropolitana é a vigésima mais rica do continente, com um PIB-PPC no valor de 58 mil milhões
de euros, o que equivale a cerca de 35% do PIB-PPC total do país. Lisboa ocupa o 122.º lugar entre as cidades com maiores receitas brutas do mundo.
</br> A maioria das sedes das multinacionais instaladas em Portugal encontram-se na região de Lisboa, a nona cidade do mundo com maior número de conferências internacionais.
</p>
</div>
<div id="zonafoto">
<div id="img1" style="float:left">
<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg/800px-Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg width=479px height=330px></div>
<div id="img2" style="float:center">
<img src=http://municipiosefreguesias.pt/files/20141111021430_vascodagama.jpg width=479px height=330px></div>
<div id="img3" style="float:right">
<img src=http://turismo.culturamix.com/blog/wp-content/gallery/praca-do-comercio/praca-do-comercio-11.jpg width=479px height=330px></div>
</div>
For the menu try this:
HTML:
<div id="outros">
<ul>
<li id="preto"><h2>Home</h2></li>
<li><h2>Museus</h2></li>
<li><h2>Monumentos</h2></li>
<li><h2>Restaurantes</h2></li>
</ul>
</div>
CSS:
#outros {
background-color: black;
color: white;
margin-left: -40px;
}
#outros li {
display: inline-block;
padding: 5px 20px;
}
I'm doing some responsive design with columns with HTML5.
I'm stucked trying to make a single column for width<800px and 3 columns for a width>=800px.
I've done it with firefox, but can't do it with chrome and I.E. my code:
<!DOCTYPE html>
<html>
<head>
<title>Media Queries Example 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/default.css" media="screen">
<link rel="stylesheet" href="css/print.css" media="print">
</head>
<body>
<section>
<div class="columns">
<p>
<span class="pTitle">HTML:</span><br>
HTML, sigla en inglés de HyperText Markup Language
(lenguaje de marcas de hipertexto), hace referencia al
lenguaje de marcado para la elaboración de páginas web.
Es un estándar que sirve de referencia del software que
conecta con la elaboración de páginas web en sus diferentes
versiones, define una estructura básica y un código
(denominado código HTML) para la definición de contenido de
una página web, como texto, imágenes, videos, juegos, entre otros.
</p>
<p>
<span class="pTitle">CSS:</span><br>
Hoja de estilo en cascada o CSS (siglas en inglés de cascading
style sheets) es un lenguaje usado para definir y crear la
presentación de un documento estructurado escrito en HTML o
XML2 (y por extensión en XHTML). El World Wide Web Consortium
(W3C) es el encargado de formular la especificación de las
hojas de estilo que servirán de estándar para los agentes de
usuario o navegadores.
</p>
<p>
<span class="pTitle">JAVASCRIPT:</span><br>
JavaScript (abreviado comúnmente JS) es un lenguaje de
programación interpretado, dialecto del estándar ECMAScript.
Se define como orientado a objetos,3 basado en prototipos,
imperativo, débilmente tipado y dinámico.<br>
Se utiliza principalmente en su forma del lado del cliente
(client-side), implementado como parte de un navegador web
permitiendo mejoras en la interfaz de usuario y páginas web
dinámicas4 aunque existe una forma de JavaScript del lado
del servidor (Server-side JavaScript o SSJS).
Su uso en aplicaciones externas a la web, por ejemplo en
documentos PDF, aplicaciones de escritorio (mayoritariamente
widgets) es también significativo.
</p>
</div>
</section>
</body>
</html>
And CSS:
#media (min-width: 800px){
body{
background: #ccccff;
}
div.columns{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;
-moz-column-rule: 5px solid black;
-webkit-column-rule: 5px solid black;
column-rule: 5px solid black;
}
div.columns p{
page-break-inside:avoid;
}
}
This works PERFECT for FIREFOX (v44.02) but can't do it with chrome or I.E.
I've tried lots of css3 propierties but without luck.
Anyone knows a working method to do it for, at least, Firefox Chrome and Opera?
Thanks!
Look at your media query. You defined (min-width: 1000px) and not like you wrote for 800px width. For me it looks good in Chrome.
See: https://jsfiddle.net/o3gom4p2/
Add display: inline-block to the paragraphs you want to be displayed as one single unit of content.
Here's an updated jsfiddle based on Steffen's:
https://jsfiddle.net/gkazwkfa/
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%;}
}