[WordPress] 写真の位置ブレークの応答性

スポンサーリンク

質問

私のヘッダーに 2 枚の写真 (facebook と youtube) を置かれた、しかし、問題が上の連絡先番号によって禁止されて、彼らはリンクをクリックしてできるにもかかわらずしていないようだし、携帯で表示とき

http://seaicf.com

この問題を解決する方法についてのアイデアから午前、誰かが助けることができるか?

ここ私 header.php 写真の挿入行までです:

 
<body <?php body_class(); ?>>
    <div id="page-container">
<?php
    if ( is_page_template( 'page-template-blank.php' ) ) {
        return;
    }

    $et_secondary_nav_items = et_divi_get_top_nav_items();

    $et_phone_number = $et_secondary_nav_items->phone_number;

    $et_email = $et_secondary_nav_items->email;

    $et_contact_info_defined = $et_secondary_nav_items->contact_info_defined;

    $show_header_social_icons = $et_secondary_nav_items->show_header_social_icons;

    $et_secondary_nav = $et_secondary_nav_items->secondary_nav;

    $primary_nav_class = 'et_nav_text_color_' . et_get_option( 'primary_nav_text_color', 'dark' );

    $secondary_nav_class = 'et_nav_text_color_' . et_get_option( 'secondary_nav_text_color', 'light' );

    $et_top_info_defined = $et_secondary_nav_items->top_info_defined;
?>

    <?php if ( $et_top_info_defined ) : ?>
        <div id="top-header" class="<?php echo esc_attr( $secondary_nav_class ); ?>">
            <div class="container clearfix">
              <div class="container clearfix">
            <?php
                $logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
                    ? $user_logo
                    : $template_directory_uri . '/images/logo.png';
            ?>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                    <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
                </a>


            <?php if ( $et_contact_info_defined ) : ?>

                <div id="et-info">
                <?php if ( '' !== ( $et_phone_number = et_get_option( 'phone_number' ) ) ) : ?>
                    <span id="et-info-phone"><?php echo esc_html( $et_phone_number ); ?></span>
                <?php endif; ?>

                <?php if ( '' !== ( $et_email = et_get_option( 'header_email' ) ) ) : ?>
                    <a href="<?php echo esc_attr( 'mailto:' . $et_email ); ?>"><span id="et-info-email"><?php echo esc_html( $et_email ); ?></span></a>
                <?php endif; ?>

                <?php
                if ( true === $show_header_social_icons ) {
                    get_template_part( 'includes/socialGoogle analytic_icons', 'header' );
                } ?>


                </div>
                </div> <!-- #et-info -->

               <ul class="et-social-icons">

                 <div><a href="http://www.facebook.com"target="_blank"><img  src="http://seaicf.com/wp-content/uploads/2015/02/facebooklike.png" width="75" height="25"/></a>&nbsp;&nbsp;&nbsp;<a href="https://www.youtube.com"target="_blank"><img src="http://seaicf.com/wp-content/uploads/2015/02/youtube.png" width="75" height="25"></a></div>

そのヘッダー クラスを制御する CSS を更新:

 
#top-header .container {
padding-top: 10px;
}

.container {
text-align: left;
margin: 0 auto;
width: 1080px;
position: relative;
}

media="all"
#top-header .et-social-icons {
float: right;
display: inline-block;
margin-top: -37px;
-moz-margin-top: 5px;
-webkit-margin-top: 5px;
}

答え

右側に 2 つのラッパーを float 型にしようとして困難にするものです。1 つの左の列の左側と右側に 1 つだけが簡単です。電話番号の下に表示されるソーシャル メディア ボタンを用意し、余分なラッパー div を追加し、配置することができます右上の 1 つで:

<div class="container clearfix">
    <a href="http://seaicf.com/%e9%a6%96%e9%a1%b5/">
    <img src="http://seaicf.com/wp-content/uploads/2015/02/logo-75.png" alt="ISI MonQ Academy" id="logo">
    </a>
    <div id="et-info">
        <div>
            <span id="et-info-phone">1800-800-800</span>
            <a href="mailto:info@seaicf.com"><span id="et-info-email">info@seaicf.com</span></a>
        </div>
        <ul class="et-social-icons">
            <div>
                <a href="http://www.facebook.com" target="_blank"><img src="http://seaicf.com/wp-content/uploads/2015/02/facebooklike.png" height="25" width="75"></a>
                <a href="https://www.youtube.com" target="_blank"><img src="http://seaicf.com/wp-content/uploads/2015/02/youtube.png" height="25" width="75"></a>
            </div>
        </ul>
    </div>
</div>

浮遊物は複雑、ちょうどこれで作られたクラスに置き換えること:

.container {
    text-align: right;
    margin: 0px auto;
    width: 1080px;
    position: relative;
}

#top-header .et-social-icons {
    margin-top: 10px;
}

#et-info {
    font-size: 20px;
}   

http://stackoverflow.com/questions/28455339/pictures-position-break-responsiveness

スポンサーリンク

Leave a Reply