Поддержка Проблемы и решения шапка сайта обрезается

  • Здравствуйте. Проблема с изображением заголовка. тема лучше всего смотрится с изображением заголовка размером 1300 × 500 пикселей. Сделали шапку с указанными размерами. но она обрезается автоматически. уменьшили размеры, ситуация не меняется. и так почти с каждой темой вордпресс.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 15 ответов — с 16 по 30 (всего 35)
  • elena81,

    Она мне их не предоставила.

    Ну, в целом тогда всё понятно.

    Здесь можно вставить скриншоты?

    Да, вы можете загрузить скриншоты на любой сервис хостинга картинок и дать ссылкуи на них здесь.

    про скрины поняла. спасибо. теперь вновь о шапке. клиентка во время видеозвонка почистила кэш, обновила страницу браузера, но ситуация не изменилась. поменяли масштаб страницы, и у нее шапка смотрелась корректно в Яндекс при 200% и в гугл при 175-200%. как решить проблему отображения?

    elena81, это уже технические нюансы у вашей заказчицы, я даже близко не вижу и не знаю через что и как она просматривает сайт, и почему в итоге у неё картинка отображается как-то иначе. У вас, у меня шапка отобразилась штатным образом при правильном размере в 1300х500 пикселей.

    она спросила меня у всех посетителей сайта будет такая проблема с отображением? а и сама ответа не знаю. если уменьшить шапку до высоты height: 243px;, ситуация может улучшиться?

    elena81,

    она спросила меня у всех посетителей сайта будет такая проблема с отображением?

    Точный ответ дать на этот вопрос невозможно, не понимая сути проблемы, а попытка подстроиться под клиентку в данном случае — это ошибка, которая как раз приведёт к тому, что у посетителей сайта шапка будет отображаться криво.

    Разумнее было бы попытаться понять почему у вашей заказчицы шапка отображается корректно только при увеличении в два раза. К примеру, воспользуйтесь хотя бы сервисами для проверки отображения сайта в разных браузерах. Всё лучше, чем ничего.

    за сервисы огромное спасибо. сейчас поищу

    Модератор Юрий

    (@yube)

    При некоторых размерах окна браузера картинка действительно немного подрезается.

    screenshot

    Это хроническая болезнь шапочных картинок, поэтому их стараются делать так, чтобы по краям было то, чего не жалко.

    Юрий, это из-за background-size: cover; происходит, если пытаться подстроиться под ширину в те же 1060 пикселей, как у вас на картинке, то стоит поменять background-size: cover; на background-size: contain;.

    THUMBALIZR — шапка обрезана.
    netrenderer.com — обрезана
    https://bluetree.ai/screenfly/?u=https%3A//nkp-trd.com/&a=27&b=10 здесь отчет по всем устройствам. и на всех них сайт виден по разному. это нормально?

    Модератор Юрий

    (@yube)

    то стоит поменять background-size: cover; на background-size: contain;.

    Возможно. И добавить no-repeat.

    и на всех них сайт виден по разному. это нормально?

    Да. Вот так и живем 🙂

    elena81,

    https://bluetree.ai/screenfly/?u=https%3A//nkp-trd.com/&a=27&b=10 здесь отчет по всем устройствам

    Это не отчёт по всем устройствам, а просто iFrame с меняющейся шириной, что действительной картины никак не отображает. То же самое сделал Юрий в инструментах разработчика, и таким образом вы увидите работу адаптивной вёрстки вашего сайта на одном конкретном устройстве. Картинка начинает резаться там, где нет соответсвующих брейкпоинтов в вёрстке, а учесть попиксельно все варианты просто технически невозможно (да и ненужно), поэтому использовать текст на картинках — это изначально плохая идея, тем более, если текст или важные графические элементы расположены близко к границам изображения (о чём Юрий выше и написал).

    спасибо. сейчас перекину это все клиентке. и буду настаивать на том что бы она убрала надписи

    elena81, или вы можете поменять background-size через дополнительные стили. Это тоже вариант.

    в каком файле находтся этот кусок кода: background-size: cover;? тема дочерняя. имеет только 3 файла: style.css, functions.php и header.php. ни в одном из этих файлов, данного куска кода нет.

    style.css

    
    /*
    Theme Name: Ashe Child
    Theme URI: https://wp-royal.com/themes/item-ashe-free/
    Template: ashe
    Author: WP Royal
    Author URI: https://wp-royal.com/
    Description: Personal and Multi-Author Free WordPress Blog Theme. Perfect for personal, lifestyle, health & fitness, food, cooking, bakery, travel, beauty, fashion, wedding, photography, news, quotes blog, auto blog, small business website and any other kind of amazing blogs. Minimal, elegant & mobile friendly layout with WooCommerce shop (storefront) support will WOW and inspire your visitors. Well documented and very easy to use even for WordPress beginners. Clean and Modern Responsive design will perfectly showcase your content on any device, even on tablet, mobile & retina displays. Very fast, compatibility with many popular plugins & of course translation & RTL (right to left language) ready, coded with best SEO practices. The theme has features like Text & Image logo, Fullscreen Slider, Header image, Instagram slider widget support, footer menu support, GDPR compatibility plugins support and many more. Works perfectly with all major drag and drop page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi. You just need to write and be awesome! TEMPLATE DEMO: https://wp-royal.com/themes/ashe-free/demo/
    Tags: blog,e-commerce,food-and-drink,one-column,two-columns,three-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,flexible-header,full-width-template,custom-menu,custom-logo,featured-images,footer-widgets,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready
    Version: 1.9.9.5.2.1617962621
    Updated: 2021-04-09 13:03:41
    
    */
    
    /*--------------------------------------------------------------
    4.0 Page Header
    --------------------------------------------------------------*/
    
    .entry-header {
      position: relative;
      overflow: hidden;
    }
    
    .header-logo {
      text-align: center;
    }
    
    .header-logo a {
      display: block;
      margin: 0 auto;
      text-transform: uppercase;
      font-size: 100px;
      line-height: 1;
    }
    
    .header-logo a img {
      margin: 0 auto;
    }
    
    .site-description {
      display: inline-block;
      margin-top: 15px;
      margin-bottom: 0;
      font-size: 17px;
      line-height: 1.1;
    }
    
    .title-tagline-shown .header-logo a:not(.logo-img),
    .title-tagline-shown .site-description {
      display: block;
    }
    
    .title-tagline-hidden .header-logo a:not(.logo-img),
    .title-tagline-hidden .site-description {
      display: none;
    }
    
    .mini-logo a {
      display: block;
      position: relative;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
    }
    

    functions.php

    <?php
    // Exit if accessed directly
    if ( !defined( 'ABSPATH' ) ) exit;
    
    // BEGIN ENQUEUE PARENT ACTION
    // AUTO GENERATED - Do not modify or remove comment markers above or below:
    
    if ( !function_exists( 'chld_thm_cfg_locale_css' ) ):
        function chld_thm_cfg_locale_css( $uri ){
            if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
                $uri = get_template_directory_uri() . '/rtl.css';
            return $uri;
        }
    endif;
    add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );
    
    if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
        function chld_thm_cfg_parent_css() {
            wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array(  ) );
        }
    endif;
    add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
    
    // Add theme support for Custom Header.
    	$custom_header_defaults = array(
    		'width'       			=> 1300,
    		'height'      			=> 500,
    		'flex-width'  			=> true,
    		'flex-height' 			=> true,
    		'default-image' 		=> esc_url( get_template_directory_uri() ) .'/assets/images/ashe_bg.jpg',
    		'default-text-color'	=> '111',
    	);
    	add_theme_support( 'custom-header', $custom_header_defaults );

    header.php

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    	<meta charset="<?php bloginfo( 'charset' ); ?>">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<link rel="profile" href="https://gmpg.org/xfn/11">
    
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    	<?php
    	if ( function_exists( 'wp_body_open' ) ) {
    	    wp_body_open();
    	} else {
    	    do_action( 'wp_body_open' );
    	}
    	?>
    
    	<!-- Preloader -->
    	<?php get_template_part( 'templates/header/preloader' ); ?>
    
    	<!-- Page Wrapper -->
    	<div id="page-wrap">
    
    		<!-- Boxed Wrapper -->
    		<div id="page-header" <?php echo esc_attr(ashe_options( 'general_header_width' )) === 'boxed' ? 'class="boxed-wrapper"': ''; ?>>
    
    		<?php
    
    		// Top Bar
    		get_template_part( 'templates/header/top', 'bar' );
    
    		// Page Header
    		get_template_part( 'templates/header/page', 'header' );
    
    		// Main Navigation
    		get_template_part( 'templates/header/main', 'navigation' );
    		
    		?>
    
    		</div><!-- .boxed-wrapper -->
    
    		<!-- Page Content -->
    		<div class="page-content">
    
    			<?php // Featured Slider and Links
    			$post_meta = get_post_meta(get_the_ID());
    
    			if ( is_front_page() && (isset($post_meta['_wp_page_template']) && 'elementor_header_footer' === $post_meta['_wp_page_template'][0]) ) {
    
    				// Featured Slider, Carousel
    				if ( ashe_options( 'featured_slider_label' ) === true && ashe_options( 'featured_slider_location' ) !== 'blog' ) {
    					if ( ashe_options( 'featured_slider_source' ) === 'posts' ) {
    						get_template_part( 'templates/header/featured', 'slider' );
    					} else {
    						get_template_part( 'templates/header/featured', 'slider-custom' );
    					}
    				}
    
    				// Featured Links, Banners
    				if ( ashe_options( 'featured_links_label' ) === true && ashe_options( 'featured_links_location' ) !== 'blog' ) {
    					get_template_part( 'templates/header/featured', 'links' ); 
    				}
    
    			}
    
    			?>
    
    			<?php get_template_part( 'templates/sidebars/sidebar', 'alt' ); // Sidebar Alt ?>
Просмотр 15 ответов — с 16 по 30 (всего 35)
  • Тема «шапка сайта обрезается» закрыта для новых ответов.