Issue: On mobile view of the Shopify Debut theme, there is excessive vertical space between the site logo/header and an embedded magazine on a specific page.
Context: The magazine is embedded via an iframe (FlipHTML5). A reference site was provided to illustrate the desired tighter spacing.
Attempts: An initial CSS change targeting .book and .tmpContainer within a mobile media query did not affect the spacing.
Diagnostic: After sharing the exact iframe embed, it became clear the spacing needed to be handled at the iframe level inside the rich text area (.rte).
Solution (mobile-only CSS): Apply position: relative and a negative top offset to the iframe: @media (max-width: 750px) { .rte iframe { position: relative; top: -109px; } }. This moves the iframe up to reduce the gap.
Outcome: The user confirmed the fix worked and removed the previous ineffective CSS. A screenshot and CSS code were central to identifying and resolving the issue.
Status: Resolved; no further actions pending.
I have created this page https://lenskiofficial.com/en/pages/magazine-vol-1 on desktop it looks great but on mobile it looks like this:
I would like to reduce the space between the magazine and the site logo. Found this as an example https://www.chromehearts.com/magazine-s1-v1.html
Can someone help me please?
@David257 Hello can you provide the pass to view the link
Pass: Originality
Try this css in theme.css
@media (max-width:750px) {
.book {
top: 0 !important;
}
.tmpContainer {
height:555px !Important
}
{
Nothing changed
This is the embed code for the live magazine.
Try this and delete previous css then
@media (max-width:750px) {
.rte iframe {
top: -109px;
position: relative;
}
}
Thank you it works great!!
@David257 welcome!
