Mobile device : reduce the size of icons+footer column one below the other

Thanks Victoria,

For icon-list, I changed the size like that (and it’s great !)
@media only screen and (max-width: 767px) {
#av_section_2 .avia-icon-list .iconlist_icon {
height: 40px;
width: 40px;
line-height: 40px;
font-size: 20px;
}
BUT there is 2 problems
1/ On mobile device, the vertical dotted line which links the icons is shifted on the right. Is it possible to get the line in the middle of the icon (same as on desktop) ?

2/ On desktop, other icons (not icon-list) in others pages get their border-width thicker. While I modified this in a CSS (see by example the link) :
.av_font_icon.av-icon-style-border .av-icon-char {
padding: 20px;
font-size: 30px!important;
border-width: 1.5px; }
I don’t know if it created a conflict ?

For the logo space, I reduced the size of the logo and changed the size of Header. But I don’t know the code to put some space on the top.
When I tried, it made the breadcrumps disappear.
I would like the same space on top as it is actually on bottom.
Can you write me the CSS for that ?

For information, here is all the CSS, I put on.
/* pour que le menu ne se superpose pas avec le logo sur petits ecrans */
@media only screen and (min-width:768px) and (max-width:1200px) {
#top .av-main-nav > li.menu-item-avia-special {
display: block;
}
#top .av-main-nav > li.menu-item {
display: none;
}
.responsive #top .av-main-nav #menu-item-search.menu-item-avia-special {
display: block;
}
}

/* pour que les icones soient plus petites sur petits ecrans */
@media only screen and (max-width: 767px) {
#av_section_2 .avia-icon-list .iconlist_icon {
height: 40px;
width: 40px;
line-height: 40px;
font-size: 20px;
}

#header
.avia_transform .av_font_icon {opacity: 1 !important;}

/* F dans menu mobile */
@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks {
display: block;
}

#faq ul { padding-top:0 !important;}
#footer { font-size: 0.8em; }
#footer .first { font-size: 1.3em; }

/* colonnes du footer sur mobile */
#footer div .av_one_fourth {
margin-left: 0%;
width: 100%;
}

.av_promobox {border-radius: 8px}
.av_font_icon.av-icon-style-border .av-icon-char {
padding: 20px;
font-size: 30px!important;
border-width: 1.5px;
}
@media only screen and (max-width: 767px) {
#av_section_2 .avia-icon-list .iconlist_icon {
height: 40px;
width: 40px;
line-height: 40px;
font-size: 20px;
}
/* pour enlever you are here sur le fil ariane ou breadcrumps */
span.trail-before {
display: none!important;
}

Thanks in advance,
Anne

Hi Victoria,

The code for logo doesn’t do anything. The problem is on desktop not on mobile device.
Is it the right code for desktop ? I apologize for my approximative english.

For the problem of border, I don’t know how to send you a screenshot in this forum. Can you explain to me, please ?
The problem was at the end of the page I sent you last time (I put the links). Near the pink button “En savoir plus”
It is only on desktop.
It is strange, it look like some code don’t work anymore. I put a code to make diseappear the sentence “Vous êtes ici” in the breadcrumps and now the sentence appaer. Maybe, there is something I made wrong when I added new code. I gave you all the code I wrote. Do you see something strange ?

Thanks a lot,
Anne

Hi Ismael,

I removed the code because it didn’t work anyway.
Here the code I removed :
.av_font_icon.av-icon-style-border .av-icon-char {
padding: 20px;
font-size: 30px!important;
border-width: 1.5px;
}
Here the login.

To resume the problems :
– I would like the logo to be centered in height, on desktop. Actually it is too close from the top
– I would like the icon border to be thinner (1.5 px). For example, at the end of the page which I gave the link or at the end of home page.
– On mobile device, the vertical dotted line which links the icons (icon-list) is shifted on the right. Is it possible to get the line in the middle of the icon (same as on desktop) ?
– And if I can remove “vous êtes ici” in the breadcrumps, it would be great

Thanks a lot

Hi Ismael,

Thanks a lot. It’s great.

For the icon list, here is the page where the problem of dotted line is. It is shown only on mobile, on desktop everything is ok.

I saw you put the code on quick CSS. Is it better than in “CSS and JS personalized” ? What is the difference ?

Thanks a lot

• This reply was modified 6 years, 7 months ago by annesite.

Thanks a lot !