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
No it does not work ….
When I check the code with google chrome, here’s what I see:

td {
border-width: 10px! important;
}

td {
font-size: 13px;
padding: 9px 12px;
border-style: solid;
border-width: 1px;
border-left: none;
border-top: none;
}

Hi,

Still struggling to get this working, can you please review my code below.

QUICK CSS:

#mc4wp-form-1 {
.email {
text-align: center;
font-size: 12px;
padding: 20px 80px;
border-color: #000000;
border-bottom: 0px;
}

::placeholder {
color: #000000;
}

.button {
color: #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 0px 0px;
cursor: pointer;
border: #000000;
padding: 20px 118.5px;
border-color: #000000;
background-color: #ffffff;
border: 2px solid #000000;

}
}

MAILCHIMP FORM:

<p>
<input type=”email” class=”email” name=”EMAIL” placeholder=”NAME@EMAIL.CO.UK” required />
<br>
<input type=”submit” class=”button” value=”SUBSCRIBE” />
</p>

Thanks.

Thank you for all your help.

I appreciate that from the bottom of my heart.

I have couple of questions if you don’t mind me asking

1). How can I create categories like shown on this page https://muslimhands.org.uk/appeals (as you can see when I hover over it the text slightly comes on the image.

2). How can I create a donate button in the header for mobile so it always shows a donate button between the logo and the burger menu.

Once again I appreciate all your help.

PS. I have adjusted the font size of the menu … how can I make the drop down menu better looking? Something like this https://www.islamic-relief.org.uk/syria-appeal/

I tried opacity and that didn’t work either –

.page-id-197 #av-tab-section-1 .av-section-tab-title {
font-size: 10px !important;
display: block !important;
opacity: 1 !important;
}

Perhaps it’s a line height issue? Thanks, again! :)

Hello,
there is only one page so just go to the homepage (taking away the /wp-admin from the domain I’ve sent you) and you will see it.

and I have the exact same problem on this subdomain: http://roswithaclages.de/
All was fine until I added 50px padding to the last 1/1 container than the container disapeared and I was left wirh:
….. [/av_textblock] [/av_one_full] [av_one_full first min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' padding='50px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='#d1d1d1' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display=''] [av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg=''] Test 1/1 [/av_textblock] [/av_one_full]
visible on the home page.

Both domain are clean installations, only plugin is akismet

• This reply was modified 8 years ago by gregorh.