-
AuthorPosts
-
February 3, 2016 at 5:01 am #576855
Hi,
How do I move the portfolio title from the bottom to the top and maybe indent it a little as well? And change the background color/text color?
Screenshot – http://s27.postimg.org/z0975rsr7/portfoliotitle.jpg
Live Site- http://f37.0c1.myftpupload.com/portfolio-item/weather-blocks/
Thanks
- This topic was modified 8 years, 10 months ago by wnow.
February 3, 2016 at 10:50 am #577027i can not see on life site the page of the screenshot. So if you have solved your problem please post it – that admins can close that tread here. If not provide us with a new link
February 3, 2016 at 4:42 pm #577165See now
Where it says TEST NAME HERE
Again, I would like to move that to the top and restyle the background color and font size
- This reply was modified 8 years, 10 months ago by wnow.
February 4, 2016 at 12:29 am #577429Hi wnow;
if I’m not mistaken you can achive what you want by using these following css codes :
I give you just as an example, adjust theme as you like..avia-caption{left: 97px !important;top: 5px !important;} .avia-caption .avia-caption-title { background: #000; filter: alpha(opacity = 80); background: rgba(0, 0, 0, 0.5); display:inline-block; margin:0 0 1px 0; padding:10px 15px; /***** I've just added following ones *****/ font-style: italic !important;font-family: Lato; }
February 4, 2016 at 12:41 am #577432Ok that works but now
but on mobile it is not rendering correctly
screenshot – http://postimg.org/image/t2vybfdo7/
What options do I have for mobile?
– make the font smaller?
– hide it all together?Also, can the font be left aligned? I will be removing that “01” from the image.
- This reply was modified 8 years, 10 months ago by wnow.
February 4, 2016 at 12:53 am #577439Hi wnov,
to hide on mobil ;/* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 767px) { ..avia-caption{display: none !important;} }
smaler font size ;
Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 767px) { .avia-caption .avia-caption-title { background: #222; filter: alpha(opacity = 80); background: rgba(0, 0, 0, 0.5); display:inline-block; margin:0 0 1px 0; padding:10px 15px; /***** I've just added following ones *****/ font-style: italic !important;font-family: Lato; /****smaler font size*****/ font-size: 12px;} }
February 4, 2016 at 12:55 am #577440You guys are amazing
final question
Also, can the font be left aligned?
mockup – http://postimg.org/image/makg4kdxd/
February 4, 2016 at 1:07 am #577441Hi wnov,
following the first codes that I’ve given above here codes to change the position of that block ;
left aligne :/*****change position left*****/
.avia-caption{left: 0 !important;top: 5px !important;}
.avia-caption .avia-caption-title
{
background: #000;
filter: alpha(opacity = 80);
background: rgba(0, 0, 0, 0.5);
display:inline-block;
margin:0 0 1px 0;
/*****change padding*****/
padding:10px !important;
/***** I’ve just added following ones *****/
font-style: italic !important;font-family: Lato;
}February 5, 2016 at 5:10 am #578229February 8, 2016 at 6:43 pm #579833Thanks. I am almost there
DESKTOP
I need to move the title “One” and portfolio item up so it aligns with the “Top Story Areas” horizontally
Screenshot – http://postimg.org/image/my58252kn/
Live Page – http://f37.0c1.myftpupload.com/portfolio-item/top-story-areas/MOBILE
On mobile, “01” overlaps with the image so I need to move that up.
Screenshot – http://s24.postimg.org/b51powdat/enfoldmobile.jpg
Live Page – http://f37.0c1.myftpupload.com/portfolio-item/top-story-areas/Please let me know if you have any questions
February 9, 2016 at 4:44 pm #580455Any update on this?
Thanks
February 11, 2016 at 2:16 pm #581617Hey!
admin login is required to see the link your have provided. Post it here as private reply.
Cheers!
AndyFebruary 11, 2016 at 2:20 pm #581619Login below. Thanks!
February 12, 2016 at 11:06 am #582145Hi!
We are working on your ticket please wait while we update the results here soon.We have enabled custom class name support http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Added a custom class called ‘.align-top’ to the slider in advance layout builder and the below css in Quick CSS
Please check the site now!
/*Add your own styles here:*/ .align-top .avia-caption-title, .align-top .avia-caption { padding-top: 0 !important; } #top .avia-caption { padding: 0 !important; position: relative; } .avia-slide-wrap img { margin-top: -4em!important; } @media only screen and (max-width: 768px) { .avia-slide-wrap img { margin-top: -2em!important; } }
Cheers!
Vinay Kashyap- This reply was modified 8 years, 10 months ago by Vinay.
February 17, 2016 at 5:59 am #584477Thank You so much. You guys are AMAZING
February 18, 2016 at 6:19 am #585173 -
AuthorPosts
- You must be logged in to reply to this topic.