html - 如何修复响应式 CSS 代码错误？

Question

在我的网站上，当我用手机输入时，响应式 CSS 不起作用。我认为它与 css 代码或 padding 有关。如果我用我的电脑输入，我可以正确看到帖子，但是当我用我的 iPhone 7 输入时，响应式 css 不起作用。

这个链接是有问题的图片: image1 image2

这是我完成的代码:

'

                            <div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
                <div id="portfolio-post-4594" class="portfolio-column portfolio-post portfolio-hover-style-1 all casa-nueva  width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
                        <div class="portfolio-content-container">
                            <div class="portfolio-thumbnail">
                                <img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-850_3591.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">                                </div> 
                            <div class="portfolio-caption-content">
                                <a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/casa-nueva/" target="_self"></a>
                                <div class="portfolio-content-inner">
                                    <div class="portfolio-content-details">
                                        <h5 class="portfolio-title"><a href="https://www.pampacasastaging.com/portfolio/casa-nueva/" target="_self">Casa Nueva</a></h5>                                        </div>
                                                                        </div>
                            </div>
                        </div>
                                                </div>                        <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
                                </div>
                        </div>
    </div><!-- #main -->
</div><!-- #primary --> 

好莱坞山当代

                            <div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
                <div id="portfolio-post-4640" class="portfolio-column portfolio-post portfolio-hover-style-1 all oakmoreroad  width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
                        <div class="portfolio-content-container">
                            <div class="portfolio-thumbnail">
                                <img width="720" height="720" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/720x720-SERVICES-bedroom3-9545OakmoreRoad.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">                                </div> 
                            <div class="portfolio-caption-content">
                                <a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/oakmoreroad/" target="_self"></a>
                                <div class="portfolio-content-inner">
                                    <div class="portfolio-content-details">
                                        <h5 class="portfolio-title"><a href="https://www.pampacasastaging.com/portfolio/oakmoreroad/" target="_self">oakmoreroad</a></h5>                                        </div>
                                                                        </div>
                            </div>
                        </div>
                                                </div>                        <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
                                </div>
                        </div>
    </div><!-- #main -->
</div><!-- #primary --> 

奥克莫尔大道。

                            <div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
                <div id="portfolio-post-4688" class="portfolio-column portfolio-post portfolio-hover-style-1 all philo  width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
                        <div class="portfolio-content-container">
                            <div class="portfolio-thumbnail">
                                <img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-livingroom2-080A3756.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">                                </div> 
                            <div class="portfolio-caption-content">
                                <a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/philo/" target="_self"></a>
                                <div class="portfolio-content-inner">
                                    <div class="portfolio-content-details">
                                        <h5 class="portfolio-title"><a href="https://www.pampacasastaging.com/portfolio/philo/" target="_self">philo</a></h5>                                        </div>
                                                                        </div>
                            </div>
                        </div>
                                                </div>                        <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
                                </div>
                        </div>
    </div><!-- #main -->
</div><!-- #primary --> 

菲罗山大道。

                            <div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
                <div id="portfolio-post-4718" class="portfolio-column portfolio-post portfolio-hover-style-1 all wilshire  width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
                        <div class="portfolio-content-container">
                            <div class="portfolio-thumbnail">
                                <img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-10450-Wilshire-Blvd-UNIT-2A-print-024-024-Bedroom-2-4200x2800-300dpi.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">                                </div> 
                            <div class="portfolio-caption-content">
                                <a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/wilshire/" target="_self"></a>
                                <div class="portfolio-content-inner">
                                    <div class="portfolio-content-details">
                                        <h5 class="portfolio-title"><a href="https://www.pampacasastaging.com/portfolio/wilshire/" target="_self">wilshire</a></h5>                                        </div>
                                                                        </div>
                            </div>
                        </div>
                                                </div>                        <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
                                </div>
                        </div>
    </div><!-- #main -->
</div><!-- #primary --> 

威尔希尔大道。'

Answer 1

你的内联内容可能比手机屏幕还宽

img width="920" height="920" .....

如果你想解决这个问题使图片(或任何元素)响应每个设备，你必须用每个设备大小的百分比或使用 vw 和 vh 单位来表达它们