Question

请看下面的图片，＃myshop div max-width是1200px，当我使用非常屏幕的电脑时，它看起来如下。我怎么能解决这个问题，我唯一不能改变的是我无法改变#myshop的最大宽度，所以如何让它在大屏幕电脑中看起来很好。在小型电脑中，笔记本电脑还可以。 Apprciate。

<!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; ?>

enter image description here

<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

在查询内部以及容器百分比内两侧（左/右）的间距。但没有你的代码，我不能给你一个例子。如果您共享代码，我会以示例进行更新。

大屏幕电脑全屏，宽度超过最大宽度，灰色背景发生

1 个答案: