Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #473917

    Hello,

    I’m trying to remove the margin or padding on that occurs on mobile devices when using the masonry portfolio items. On desktop it’s perfect, no spaces and perfectly touches all edges, however on mobile all tiles have a large space, guessing 15px.

    The code I applied was:

    @media only screen and (max-width: 768px) {
    div.av-masonry-image-container {
    margin: 0px !important;
    padding: 0px !important;
    }

    But that is not working.

    #474111

    Hey haydaw!

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #474503

    Hey there,

    Please take a look at wp.thekangagroup.com/CBA/

    You’ll notice on desktop everything is flush, however once on mobile the tiles align vertically (which is completely fine), and there is a large padding around each square. I’ve already gone ahead and removed the titles.

    Thanks,

    Hayden

    #474513

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
    .flex_cell_inner {
      width: 100%!important;
      max-width: 100%!important;
      margin: 0!important;
    }}

    Best regards,
    Yigit

    #474522

    Hey Yigit,

    Thanks for getting back and getting that figured out. One thing, with that applied, now the text is also 100% full width. How would I go about getting the text to still have a small left-right padding? Around 2%.

    Thanks,

    Hayden

    #474526

    Hey Hayden!

    Sorry, did not think of it :)
    Please add following code to Quick CSS as well

    @media only screen and (max-width: 480px) {
    .flex_cell_inner .av_textblock_section {
      margin: 0 5%;
    }}

    Regards,
    Yigit

    #476047

    Hey Yigit,

    Thanks again for helping out with this. I have one last request, now when viewing on mobile, I’m not sure if the above code messed this up or some other code I am using to add two logos, however the menu items and logos are not in the correct location.

    You can visit wp.thekangagroup.com/CBA/ to take a look. You’ll notice there is no background, and the images / menu button are not in the correct spot. I’m assuming I’ll need to make the logos smaller as well to make this work correctly.

    Thanks for any input.

    Best,

    Hayden

    #476317

    Hey!

    Please try the following CSS as well:

    @media only screen and (max-width: 767px) {
    #advanced_menu_toggle {
      margin-top: 15px;
    }
    
    #header .widget {
      left: 0%;
      transform: translate(0%);
    }
    }

    Cheers!
    Rikard

    #476670

    Hello,

    Thanks for all of the assistance, the last thing I need to make this polished is adding a background to the image, and decreasing the double-logos size. I’ve added a class header-double-logo to hopefully make this easier, but I can’t seem to adjust the height of the logos.

    http://cba.thekangagroup.com/

    Thanks,

    Hayden

    #477476

    Hi,

    I’m not sure what you mean by a background for the image, but you can try this for setting a background to the widget:

    #text-2 .textwidget {
    background-color: gray;
    }

    …and you can try the following for controlling the width of the logos:

    .header-double-logo {
    max-width: 45%;
    }

    Best regards,
    Rikard

    #477497

    Hey Rikard,

    Thanks for the information, unfortunately neither worked. I also meant to say background color for the whole mobile menu bar, not just behind the images, sorry about that.

    For some reason my mobile menu is transparent and that is the main issue, as it needs to have a black background.

    Thanks,

    Hayden

    #478582

    Hey!

    You can decrease the logo size with this:

    @media only screen and (max-width: 480px) {
    #header .widget div a img {
      width: 35%;
    }}

    Remove browser cache then reload the page.

    Cheers!
    Ismael

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