Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 26, 2018 at 3:20 am #917632
    projectt_co_uk

    Hi,

    I have created a portfolio with images here

    Alfa Romeo Lease Deals

    It works fine on desktop and show the title on hover.

    However on mobile it permanently shows the titles hiding some part of my images and it doesnt look right.

    I have added the following CSS code from one of previous posts

    @media only screen and (max-width: 767px) {
    .main_color .container .av-inner-masonry-content,
    #top .main_color .container .av-masonry-load-more,
    #top .main_color .container .av-masonry-sort,
    .main_color .container .av-masonry-entry .avia-arrow {
    background-color: rgba(248, 248, 248, 0.1);
    }
    .av-fixed-size .av-masonry-entry .av-inner-masonry-content,
    .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
    left: 0;
    padding: 10px;
    }
    .main_color .site-background {
    color: #2d2b2b;
    }
    .av-masonry-entry .av-inner-masonry-content {
    padding: 10px;
    font-size: 13px;
    }
    }

    it works for some pages while for the other like the one here

    Alfa Romeo Lease Deals

    It doesn’t work as the images contain shadow and the title don’t show properly.

    Is there anyway to make the title only appear when you click on the image on mobile or move the title below the image.

    Looking forward to your solution.

    Thank you,

    February 26, 2018 at 9:58 am #917718
    Victoria

    Hey projectt_co_uk,

    I think you can leave a light background on the mobile so the text is visible.

    
@media only screen and (max-width: 767px) {
.main_color .container .av-inner-masonry-content,
#top .main_color .container .av-masonry-load-more,
#top .main_color .container .av-masonry-sort,
.main_color .container .av-masonry-entry .avia-arrow {
background-color: rgba(243, 236, 236, 0.76);
}
.av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
    left: 0;
    padding: 5px 10px;
    bottom: -5px;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    February 28, 2018 at 5:17 pm #919179
    projectt_co_uk

    Thank you Victoria that worked.

    Related to the same website … how can I change the colour of menu button “Book a Call Back”

    I am trying to change the color to #b51212.

    Thank you

    March 1, 2018 at 7:51 am #919435
    Rikard

    Hi,

    Please try this CSS as well:

    #menu-item-696 .avia-menu-text {
  background-color:#b51212 !important;
}

    Best regards,
    Rikard

    March 1, 2018 at 5:06 pm #919756
    projectt_co_uk

    Hi Rikard,

    The code didn’t work. I tried the same code myself but didn’t work.

    Please can you help?

    Thank you,

    March 1, 2018 at 8:26 pm #919864
    Vinay

    Hi,

    To change the color of the button menu item please use the below CSS

    #top .av-menu-button > a .avia-menu-text {
    background: #b51212 !important;
    border: none!important;
}

    Best regards,
    Vinay

    March 1, 2018 at 9:54 pm #919967
    projectt_co_uk

    Hi Vinay,

    Thank you for your help.

    Unfortunately this code didn’t work either.

    March 2, 2018 at 7:17 am #920109
    Vinay

    Hi,

    Thank you for sharing the credentials. I checked the code in Quick CSS and it appears the previous code you added was not closed correctly so any code that you add below was not working for you. I have closed the codes for you and everything seems to work fine.

    Please review the site and let us know if you have any questions.

    NOTE: Make sure to clear the browser cache by holding down the shift key and press refresh or F5 key a few times.

    Best regards,
    Vinay

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