Can’t get responsive

  • Resolved david2432

    (@david2432)


    5 years, 3 months ago

    I’m inserting the code from Amazon (check the clock on the link please) but it’s not responsive. I use insertion: Inside html element and pushed with margins but on mobile view it overlays and hides the content. Is there a way to do this better and make it responsive?
    I enabled remote debugging. Also the image is partially clickable when hovering mouse on it.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Spacetime

    (@spacetime)

    5 years, 3 months ago

    Browser debugging functions seem to be disabled.

    If the ad code is not responsive then you can only insert different ad sizes based on the device or viewport:
    https://adinserter.pro/documentation/device-detection

    Thread Starter david2432

    (@david2432)

    5 years, 3 months ago

    I’m sorry. You can check now for browser debugger.

    Plugin Author Spacetime

    (@spacetime)

    5 years, 3 months ago

    I see no issues for block 7:

    For block 29 you are using margins that are not suitable for mobile page layout.

    Do not use such margins and do not use floating alignemnt.
    Center it with this css:

    margin: 8px 0; text-align: center; clear: both; display: flex; justify-content: center; flex-direction: column; align-items: center;

    Thread Starter david2432

    (@david2432)

    5 years, 3 months ago

    I’m no coder. If I put your code in css then it aligns the image in the center but I need it to be to the right side of the board.

    Plugin Author Spacetime

    (@spacetime)

    5 years, 3 months ago

    Then use right alignemnt, just don’t use float.

    Thread Starter david2432

    (@david2432)

    5 years, 3 months ago

    If I use Alignment – right option with insertion – “Inside html element” and specified html selector – div#sitecontent, then it puts the image to the very top right of the page, tha’ts why I pushed it with margins.
    If I use insertion – “After Paragraph”, it makes extra space as you can see it now.
    I know I look dummy now but I wouldn’t post here if I didn’t try many variations and so far I couldn’t find the best match.
    What I want with that image, is – to put it on the right side on the board without extra spaces making and to be responsive. Then I will put the second one bellow it… It’s like sidebar but my sidebar is already full, so I try without it now. If I can’t do this, then maybe it’s worth to install custom sidebar which will will allow me to insert different widgets.

    • This reply was modified 5 years, 3 months ago by david2432.
    Plugin Author Spacetime

    (@spacetime)

    5 years, 3 months ago

    OK, I see now.

    You need to use two blocks with different alignments, one for desktop and one for mobile.
    Use insertion as it is now for both blocks.

    But you need to properly define Desktop viewport width: 1200
    https://adinserter.pro/documentation/plugin-settings#viewports

    You can also define one additional (wide) desktop viewport only for this ad.

    For desktop set alignment to Float right.
    Enable the block only for (wide) desktop

    For mobile use Center alignment and for the image use style width: 100%; max-width: 400px; height: auto; to make it responsive (to fill available width up to 400px).
    Use larger image so it looks good also on tablets.
    Enable the block for wiewports except (wide) desktop.

    Make sure you use client-side device detection:
    https://adinserter.pro/documentation/device-detection

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Can’t get responsive’ is closed to new replies.