Hi There – this doesn’t do anything – I tried adding a media query as well

@media only screen and (max-width: 989px){
.home .avia-slideshow-button a {
font-size: 9px !important;
}
}

But neither did anything – any other suggestions – I always have issues getting buttons on your slideshow module to display properly on mobile – is it betterto increase the size of the slideshow height on mobile rather than decrease the size of the buttons?

Cheers

great thanks that did it.
Cheers

Hi there apologies for the late response – I missed this notification – details below – yes you can disable plugins but please take re-enable them when you’re done and first take a backup with backupbuddy…I have it running every night but it will just depend on when you’re in the site.

Hi Vinay – I just tried using that and adding it to my child theme CSS

.sd-blue{
width: 100%;
height: 100%;
background: url(‘http://rfl.shortiedesigns.com/wp-content/uploads/2016/06/blue_bg-1.png’) center center no-repeat;
background-size: cover;

&:before {
content: ”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}

But when I do the background goes white

Here is a screenshot of what i’m trying to do

https://www.dropbox.com/s/fhjvczd5lacv3fg/Screen%20Shot%202016%2006%2028%20at%203.29.53%20pm.png%20%201303%C3%97572%20.png?dl=0

– I’m trying to have a full width background imge
– and a gradient attached to this particular class…

any clues would be great thanks

okay thanks that did it – I tried that but I had added it to my child theme stylesheet – is there anyway to make this style work in my child’s stylesheet – this way I can keep it all in one place….

cheers

Hi Ismael – okay – this is what I’m trying to do – sorry I wasn’t very clear, never mind having 2 background images…I’ve combined them into one PNG and stretched it to fit – so ignore – however I’m still having issues as per below:

1 – I’ve attached a background image to the avia layout builder
2 – I’ve also written some custom styles to make the blue coloured section have a coloured gradient (see below)
however the issue is – when I add my custom class to the ‘coloured’ module of the layotu builder – as per below – the background image that I’ve uploaded dissapears…

How do i a) have the background image I’ve uploaded and the gradient appear…..

thanks

.sd-blue{
border-bottom: 20px solid #ffc72d;
background: #3574b9; /* Old browsers */
background: -moz-linear-gradient(top, #3574b9 0%, #16304d 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top, #3574b9 0%,#16304d 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #3574b9 0%,#16304d 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#3574b9′, endColorstr=’#16304d’,GradientType=0 ); /* IE6-9 */
}

Hi Ismael, yes I did upload it from the upload manager. I think what’s happened is I used the font awesome cheat sheet when choosing a font for the design

http://fontawesome.io/cheatsheet/

but the Fontello Font Awesome collection doesn’t have all the fonts from Font Awesome….

How would I deploy them manually so that the correct font appeared next to the heading for the icon box?

hi team – I’ve gone into theme options and my site width is 1130px – I’ve not had this issue before so not sure what’s happening
I’ve just tried adding the
.container.av-logo-container {
max-width: 85%;
}

and this seems to work.
Cheers

I worked it out – the code needed more specificity,

#top #header .av-main-nav > li > a{
padding-left: 5px;
padding-right: 5px;
}

Hi – I added that and the navigation is now too wide and sits over the logo – which is why I added negative margins – to reduce the space bewteen each menu item – how do I do this safely?

cheers

Hi Yes – we reomved the captions – cheers

Thanks Yigit – I also put in an extra media query for the the smaller screens as this still cut the text off on iphone landscape view

@media only screen and (max-width: 460px) {
.av-image-caption-overlay-center {font-size: 12px!important; padding-left:15px !important;}
}

Hi Andy – apologies, I was merely letting you know that I hadn’t found a solution but had provided a work around as I had to show my client – and I didn’t want to confuse which it obviously did – please have a look at my messages above yours… it explains in detail what the issue is.,….but as you weren’t the original person to respond I will recap….

here is the page I’m referring to

http://www.sasi-skin.com/site/services/

1 – I need one of the sections on this page to display like this – see the screenshot – have a look at the gold section at the bottom of the page..
https://www.dropbox.com/s/w47x3iqwns5qmat/Screen%20Shot%202016-05-02%20at%2012.43.50%20pm.png?dl=0

.the issue is when I add content to this text section – the background doesnt’ maintain the same height as the content does –
https://www.dropbox.com/s/i156a6flbtigxdf/Sasi%20Skin%20Spa%20%20%20Services-site.png?dl=0

2 – to achieve the styling for this module in the theme I did the following – please note all the main parts of the this page need to be narrower than the 1024px width set out in the theme settings – this is due to the design…

a) I added a 1/1 column module with a class of sd-body which forces anything in it to the narrower width I need to fit the design (see the white part of the page above – this uses the same)

b – then I’ve dropped a text block into this column, and I’ve added a class of sd-services-box which makes the whole background that gold colour. This all was looking fine until I needed to add a 3 column layout. Once I did this – the background of the content doesn’t

b – so to split the content over three rows – I’ve copied and pasted the 3 column shortcode into the text module

[av_one_third first]INTRODUCING DMK AND SKIN CONSULTATION
DMK ENZYME THERAPY
SKIN PEELS
DMK SPA FACIALS
DMK BODY TREATMENT[/av_one_third]

[av_one_third]MASSAGE, SPA BODY& PACKAGES
MICRODERMABRASION
ALKALINE HAIR REMOVAL
MANICURE & PEDICARE
ACRYLIC NAILS
MAKE-UP[/av_one_third]

[av_one_third]SPRAY TANS
WAXING & SUGARING
ELECTROLYSIS
LASHES & BROWS
EAR PIERCING
IPL & INJECTABLE[/av_one_third]

however this breaks the layout – see this screenshot – the background doesn’t expand to the height of the content

https://www.dropbox.com/s/i156a6flbtigxdf/Sasi%20Skin%20Spa%20%20%20Services-site.png?dl=0

– i’ve tried added ‘clear:both’ to the sd-services-box – this didn’t work
– I tried adding this to a code block but this isn’t very user friendly for the client to update
– when I used the code block – this layout broke when I added my custom class of sd-services-box
– I added ‘height:350px; to my class and it expanded to a good height, but doesn’t work responsively – but this was a quick workaround for when the client looks at the site – I’ve removed this now so you can see the issue.

So my guess is I need to add something to my class in order for it to work with the content?

I’ve included logins above – please let me know if you need any further info

thanks team – that worked! I knew I had seen that option somewhere but couldnt remember where

okay thanks – details below