executive pro 3 column responsiveness

[Dad]

Good Afternoon,
I test on localhost a 3 columns page on executive pro theme and when I change the size of my browser, the colums are not going one under the other one like in the demo. Any idea ?

Here is my html :

Rédaction technique / Maintenance / Alignement du SI

 

<!--more-->
<h4>IO Software, Conseil en Stratégie et Développement commercial pour les TPE/PME fournit trois types de services informatiques :</h4>
 
<div class="one-third first">Rédaction technique
Qu'il s'agisse d'un guide utilisateur, d'un guide administrateur ou même de documents extrêmement techniques, nous saurons s'il le faut monter les configurations idoine et rédiger la documentation correspondante. Nous avons une expérience de plus de 20 ans dans la rédaction technique.</div>
<div class="one-third">Informatique de maintenance :
Nos Services informatiques de maintenance vous permettront de vous affranchir de la gestion de votre parc informatique. Que vous possédiez un ou plusieurs ordinateurs de bureau ou bien un ou plusieurs ordinateurs portables, que vous possédiez une ou plusieurs imprimantes, un réseau local nous nous engagerons à vous garantir le bon état de fonctionnement de votre matériel par des visites régulières de mise à niveau des logiciels ainsi que l'application d'anti-virus, de surf anonyme sur internet, de mise en place d'une sécurité avancée ...</div>
<div class="one-third">Informatique d'alignement du système d'information
De nos jours, l'outil informatique est indispensable à toute TPE/PME qui veut se développer. Le plus souvent par manque de temps, l'outil ou les outils techniques mis en place ne correspondent pas à l'organisation de votre entreprise. Par exemple, vos données commerciales sont enregistrées à plusieurs endroits par plusieurs commerciaux qui gèrent leur portefeuille client. Ne serait-il pas plus simple de n'avoir qu'un seul système de stockage de ces données afin que les informations ne soient pas dupliquées et parfois fausses ?Par exemple, le client X a changé de n° de téléphone. Le commercial concerné met à jour ce numéro dans son fichier client. Par contre, il oublie de le signaler à l'autre commercial qui le remplace pendant les vacances sur ce compte. Comment faire ? Sa machine est verrouillée et il est injoignable.
Ceci n'est qu'un exemple. L'informatique doit-être agile et pouvoir s'adapter le plus facilement possible aux changements d'organisation qui pourraient subvenir dans votre entreprise. Nous pouvons mettre tout cela en place pour vous.
Une donnée ne doit être stockée qu'en un seul endroit.</div>
Mieux vaut prévenir que guérir. Nous saurons également vous conseiller ou choisir avec vous la mise en place de matériel de remplacement du obsolète qui vous fait perdre du temps et assurer les formations indispensables à la prise en mains des nouveaux outils afin d'améliorer votre productivité.

Vous êtes une TPE/PME et n'avez pas le temps de vous en occuper ? Contactez-nous.

[Lauren @ OnceCoupled]

If it's only breaking when you decrease your browser size, you need to check your style.css's @media queries. Probably at your smallest screen size they'll be listed with width:100%;

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Dad]

Thanks Lauren,
By default in the style.css I have some @media only screen and (max-width: 1023px) with max-width depending on the size screen ... I guess ... Not very used to. But I use the style.css provided by Studiopress and did not touch that functionality.

Sample :

@media only screen and (max-width: 1200px) {

.site-container {
max-width: 960px;
}

.site-header .widget-area {
width: 700px;
}

.content {
width: 660px;
}

.sidebar-primary {
width: 300px;
}

.title-area {
width: 260px;
}

.breadcrumb {
margin: -30px -40px 30px;
margin: -3rem -4rem 3rem;
}

.content {
padding: 30px 40px 10px;
padding: 3rem 4rem 1rem;
}

.site-header .genesis-nav-menu a {
padding: 38px 14px 40px;
padding: 3.8rem 1.4rem 4rem;
}

.content #genesis-responsive-slider .flex-control-nav,
.content #genesis-responsive-slider .flex-direction-nav li a,
.content #genesis-responsive-slider .flex-direction-nav li a.prev {
display: none;
}

[Lauren @ OnceCoupled]

Without a live site, I really couldn't say what's happening. As you say, everything should be working properly!

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Dad]

Thanks
I think I will put it online soon and come back to that topic if needed. Best to troubleshoot online for sure with correct devices.

Many thanks

Philippe

[Dad]

Hello Lauren,

My web site is online !!!! on a test URL : http://io.io-software.fr.

You will see that responsiveness is not my best technical skil ... 🙁

You have an idea ?

Kind Regards,

[Lauren @ OnceCoupled]

Line 2167 is missing a closing bracket. This will fix your responsiveness!

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Dad]

Wow what an eye 🙂 thanks a lot !!!!
It fixed everything except the search box I modified a little .....:-(

Do you know why the logo is not appearing on an iphone ?

[Lauren @ OnceCoupled]

Search: when you modified it, you used a very specific selector. This is carrying greater weight than the one in your media queries. http://css-tricks.com/specifics-on-css-specificity/
You'll want to add your selector to the media query.

Logo: I don't see a logo appearing at any screen size. Probably because the image URL has not been updated.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Dad]

I fixed the search box.
Concerning the logo, yes it is on the top left of the web site. This is a pyramid.

[Author]

Posts