how to change the position of the members section picture for mobile?

Home Forums Jevelin Theme how to change the position of the members section picture for mobile?

Home Forums Jevelin Theme how to change the position of the members section picture for mobile?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    RESOLVED Posts
  • florianf
    Participant

    Hello,

    I just bought the Jevelin theme and start to create my one page portolio website withit. Thanks for your work, that’s great!

    The default picture of the team member section is very small when I check my website with a mobile phone and the social media icons on hover are really big…How can I change this position and place it up to the text?
    By the way how can I define the color on hover? Any ideas?

    My website under construction:
    http://50.87.249.205/~floriao4/

    thanks in advance,
    Florian

    Attachments:
    You must be logged in to view attached files.

    Solution for this topic

    Hi Florian,

     

    Thank you for your questions.

     

    The default picture of the team member section is very small when I check my website with a mobile phone and the social media icons on hover are really big…How can I change this position and place it up to the text?

    Do you mean on mobile devices you want to display image above the text in larger size?

    By the way how can I define the color on hover? Any ideas?

    The hover color is same as your theme accent color set in the theme options but if you want to just change the hover color then you can do so by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    body .sh-team-social-overlay2 .sh-team-image:hover .sh-team-overlay2,
    body .sh-overlay-style1,
    body .sh-portfolio-overlay4 {
        background-color: rgba(0, 254, 104, 0.8)!important;
    }

     

    You can change the color value in the above code to whatever you want to use by referring the following pages.

     

    http://www.w3schools.com/html/html_colors.asp
    http://www.w3schools.com/html/html_colorvalues.asp
    http://www.w3schools.com/tags/ref_colorpicker.asp

     

    Best regards,
    Shufflehound team

    florianf
    Participant

    Do you mean on mobile devices you want to display image above the text in larger size?

    Yes, exactly! sorry for my english!

    Solution for this topic

    To achieve that please try using below custom CSS code.

    @media (max-width: 551px) {
    .sh-team .sh-team-image-container {
        width: 100%;
        display: block;
    }
    
    .sh-team .sh-team-aside {
        width: 100%;
        padding-left: 0;
        display: block;
    }
    }

    florianf
    Participant

    thanks! that’s nice now!

    You are most welcome here 🙂

Viewing 6 posts - 1 through 6 (of 6 total)