大屏幕计算机上全屏显示，宽度超过最大宽度，出现灰色背景

Question

看下面的图片，＃myshop div的最大宽度为1200px，当我使用非常屏幕的计算机时，它看起来如下。 如何解决此问题，唯一无法更改的是无法更改#myshop的最大宽度，因此如何使它在大屏幕计算机上看起来不错。 在小型计算机中，笔记本电脑可以。 感激

 <!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie ie6" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title><?php wp_title('|', true, 'right'); ?></title> <?php wp_head(); ?> <!--[if lt IE 9]><script src="<?php echo THEMEASSETS; ?>js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div id="top_head"> <a href="http://sayhitoworld.spreadshirt.com/shop/help/index/" id="top_help">Help?</a> <div id="checkout_top" class="spreadplugin-checkout"><a target="_self">Shopping bag</a>(<span></span>)</div> <a id="track_order" href="https://sayhitoworld.spreadshirt.com/shop/logon">Track Order</a> </div><!--top_head--> </head> <body <?php body_class(); ?>> <?php if(function_exists('WC')): ?> <?php get_template_part('tpls/header-cart'); ?> <?php endif; ?> <?php if( ! defined("NO_HEADER_MENU")): ?> <div class="wrapper"> <?php define("HAS_SLIDER", in_array('revslider/revslider.php', apply_filters('active_plugins', get_option( 'active_plugins'))) && function_exists("register_field_group") && ($revslider_id = get_field('revslider_id'))); # Menu if(HEADER_TYPE == 1) { get_sidebar('menu'); } else if(in_array(HEADER_TYPE, array(2,3,4))) { get_sidebar('menu-top'); # Slider if(HAS_SLIDER) { if(is_search()) echo "<div style='height: 30px;'></div>"; else echo putRevSlider($revslider_id); } } ?> <div class="main<?php echo HEADER_TYPE == 1 && HAS_SLIDER ? ' hide-breadcrumb' : ''; ?>"> <?php get_template_part('tpls/breadcrumb'); ?> <?php # Slider if(HEADER_TYPE == 1 && HAS_SLIDER): ?> <div class="rev-slider-container row"> <?php echo putRevSlider($revslider_id); ?> </div> <?php endif; ?> <?php endif; ?> 

 <div class="page-container"> <?php if($is_vc_page === false): ?> <div class="col-md-12"> <div class="white-block block-pad"> <h1 class="single-page-title"><?php echo the_title(); ?></h1> <div class="post-content"> <?php the_content(); ?> </div> </div> </div> <?php else: ?> <?php the_content(); ?> <?php endif; ?> <div id="myshop_wrap"> <div id='top_basket'></div> <div id="myshop"></div> </div> <script> var spread_shop_config= { "shopName" : "hitoworld", "locale" : "us_US", "prefix" : "//shop.spreadshirt.com", "baseId" : "myshop" }; </script> <script type="text/javascript" src="//shop.spreadshirt.com/shopfiles/shopclient/shopclient.nocache.js"></script> </div><!--page-container--> 

Answer 1

创建另一个媒体查询，并将最小宽度设置为1201px

在查询中以及容器两侧（左右）的一些间距（以百分比表示）。 但是，如果没有您的代码，我将无法为您提供示例。 如果您共享代码，我将用示例进行更新。