Tagged: , , , , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 15, 2015 at 6:43 pm #473917
    haydaw

    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.

    July 16, 2015 at 8:36 am #474111
    Rikard

    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

    July 16, 2015 at 6:41 pm #474503
    haydaw

    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

    July 16, 2015 at 7:14 pm #474513
    Yigit

    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

    July 16, 2015 at 7:28 pm #474522
    haydaw

    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

    July 16, 2015 at 7:33 pm #474526
    Yigit

    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

    July 20, 2015 at 7:24 pm #476047
    haydaw

    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

    July 21, 2015 at 6:20 am #476317
    Rikard

    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

    July 21, 2015 at 6:29 pm #476670
    haydaw

    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

    July 23, 2015 at 4:56 am #477476
    Rikard

    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

    July 23, 2015 at 6:03 am #477497
    haydaw

    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

    July 25, 2015 at 7:34 am #478582
    Ismael

    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

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