Tagged: ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • February 3, 2016 at 5:01 am #576855
    wnow

    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, 9 months ago by wnow.
    February 3, 2016 at 10:50 am #577027
    Guenni007

    i 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 #577165
    wnow

    See now

    Weather Blocks

    Where it says TEST NAME HERE

    Again, I would like to move that to the top and restyle the background color and font size

    Weather Blocks

    • This reply was modified 8 years, 9 months ago by wnow.
    February 4, 2016 at 12:29 am #577429
    begrafiks

    Hi 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 #577432
    wnow

    Ok that works but now

    but on mobile it is not rendering correctly

    screenshot – http://postimg.org/image/t2vybfdo7/

    Weather Blocks

    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, 9 months ago by wnow.
    February 4, 2016 at 12:53 am #577439
    begrafiks

    Hi 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 #577440
    wnow

    You 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 #577441
    begrafiks

    Hi 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 #578229
    Rikard

    Hi @wnow,

    Did you have any luck with the last suggestion from @begrafiks?

    Best regards,
    Rikard

    February 8, 2016 at 6:43 pm #579833
    wnow

    Thanks. 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


    @begrafiks

    February 9, 2016 at 4:44 pm #580455
    wnow

    Any update on this?

    Thanks

    February 11, 2016 at 2:16 pm #581617
    Andy

    Hey!

    admin login is required to see the link your have provided. Post it here as private reply.

    Cheers!
    Andy

    February 11, 2016 at 2:20 pm #581619
    wnow

    Login below. Thanks!

    February 12, 2016 at 11:06 am #582145
    Vinay

    Hi!

    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, 9 months ago by Vinay.
    February 17, 2016 at 5:59 am #584477
    wnow

    Thank You so much. You guys are AMAZING

    February 18, 2016 at 6:19 am #585173
    Rikard

    Hi,

    Great, glad we could help :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.