Eliminate the margin of an image on mobile

  • Resolved jelo_inc

    (@jelo_inc)


    8 years, 10 months ago

    hi, i have been trying to use your plugin, but i can not get it work.
    i tray to delete the margin of an image on mobile and add it on desktop but doesn’t work for me. Hope you can help me.

    This is the original code for mobile

    .adsng-cover img {
margin-left: -30px;
margin-bottom: 40px;
width: 310px;
height: 310px;
}

    basically i want to put 0 on desktop but i dont know wre does it goes the function. BTW im working on the style.css i made this but doesn’t work:

    <?php
if (is_mobile()) {
.adsng-cover img {
  margin-left: -30px;
  margin-bottom: 40px;
  width: 310px;
  height: 310px;
}}
?>
<?php
if (!is_mobile()) {
.adsng-cover img {
  margin-left: 0px;
  margin-bottom: 40px;
  width: 310px;
  height: 310px;
}}
?>

    and this but doesn’t work either:

    .adsng-cover img {
<?php
if (is_mobile()) {
  margin-left: -30px;
  margin-bottom: 40px;
  width: 310px;
  height: 310px;
}
?>
<?php
if (!is_mobile()) {
  margin-left: 0px;
  margin-bottom: 40px;
  width: 310px;
  height: 310px;
}
?>
}

    BTW this is the web page.

    https://whitevillage.ml/audio/you-always-get-me-high-gig/

    https://www.ads-software.com/plugins/mobble/

Viewing 1 replies (of 1 total)
  • Plugin Author Scott (@scottsweb)

    (@scottsweb)

    Hi
    Unfortunately it is not possible to write PHP code in CSS files. mobble is designed to work within your .php templates.

    To adjust CSS for different devices you need to use media queries. Media queries allow you to target different device widths with your CSS. You can find out more here:

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Using your code above you would end up with something like:

    /** mobiles / default styles **/
.adsng-cover img {
  margin-left: -30px;
  margin-bottom: 40px;
  width: 310px;
  height: 310px;
}

/** devices wider than 600px - tablets / desktops **/
@media screen and (min-width: 600px) {
  .adsng-cover img {
    margin-left: 0px;
    margin-bottom: 40px;
    width: 310px;
    height: 310px;
  }
}
Viewing 1 replies (of 1 total)
  • The topic ‘Eliminate the margin of an image on mobile’ is closed to new replies.