时间戳

首页 > 解决方案 > 移动与。桌面行显示

responsive-design - 移动与。桌面行显示

问题描述

我正在寻求解决此响应式显示问题的帮助。我可以隐藏\显示设备所需的图像但是，我无法隐藏该行。因此，这会放置一个空行，在隐藏图像所在的位置显示一个大的白色间隙。该网站是https://restoresell.com/

如何隐藏 ROW 和 IMAGE 以使显示中没有空白行的间隙？注意：在桌面行版本中，我使用 1900x500 图像，而在移动行版本中，我使用 800x800 图像。使用的工具是 WBakery Builder

网站：https ://restoresell.com/ 问题位置：主页导航下的第一行。正文内容区域的顶部

HTML 代码示例：

<div data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid gradient-container-1 vc_custom_1634656822945 vc_row-has-fill vc_row-no-padding vc_row-o-full-height vc_row-o-columns-middle vc_row-o-content-middle vc_row-flex" style="position: relative; left: -66px; box-sizing: border-box; width: 1332px; min-height: 77.82vh;"><div class="gradient-column-1 wpb_column vc_column_container vc_col-sm-12 vc_hidden-lg vc_hidden-md"><div class="vc_column-inner"><div class="wpb_wrapper">
    <div class="wpb_single_image wpb_content_element vc_align_center  vc_custom_1634656121177">
    
    <figure class="wpb_wrapper vc_figure">
        <div class="vc_single_image-wrapper   vc_box_border_grey"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" width="800" height="800" data-src="https://restoresell.com/wp-content/uploads/2021/10/Restoration-Brokers-of-America-Restoration-Business-Consulting-Brokrage-Team.jpg" class="vc_single_image-img attachment-full" alt="Restoration Brokers of America - Restoration Business Consulting &amp; Brokerage Team" loading="lazy" data-srcset="https://restoresell.com/wp-content/uploads/2021/10/Restoration-Brokers-of-America-Restoration-Business-Consulting-Brokrage-Team.jpg 800w, https://restoresell.com/wp-content/uploads/2021/10/Restoration-Brokers-of-America-Restoration-Business-Consulting-Brokrage-Team-300x300.jpg 300w, https://restoresell.com/wp-content/uploads/2021/10/Restoration-Brokers-of-America-Restoration-Business-Consulting-Brokrage-Team-150x150.jpg 150w, https://restoresell.com/wp-content/uploads/2021/10/Restoration-Brokers-of-America-Restoration-Business-Consulting-Brokrage-Team-768x768.jpg 768w" data-sizes="(max-width: 800px) 100vw, 800px"><noscript><img width="800" height="800" src="https://restoresell.com/wp-content/uploads/2021/10/Restoration-Brokers-of-America-Restoration-Business-Consulting-Brokrage-Team.jpg" class="vc_single_image-img attachment-full" alt="Restoration Brokers of America - Restoration Business Consulting &amp; Brokerage Team" loading="lazy" srcset="https://restoresell.com/wp-content/uploads/2021/10/Restoration-Brokers-of-America-Restoration-Business-Consulting-Brokrage-Team.jpg 800w, https://restoresell.com/wp-content/uploads/2021/10/Restoration-Brokers-of-America-Restoration-Business-Consulting-Brokrage-Team-300x300.jpg 300w, https://restoresell.com/wp-content/uploads/2021/10/Restoration-Brokers-of-America-Restoration-Business-Consulting-Brokrage-Team-150x150.jpg 150w, https://restoresell.com/wp-content/uploads/2021/10/Restoration-Brokers-of-America-Restoration-Business-Consulting-Brokrage-Team-768x768.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /></noscript></div>
    </figure>
</div>
</div></div></div></div>

标签： responsive-designresponsive-images

解决方案

我必须创建一个类并将其插入到行设置“额外类”中。比在页面自定义 css 中插入 css。

推荐阅读