Web Analytics
REQUEST - Request for css code to align sidebar properly - StoreFront Forums

REQUEST Request for css code to align sidebar properly

ajahtitus

Member
Contributor
Aug 24, 2021
60
29
18
https://t.me/pump_upp
t.me
Good evening house, admin and everyone. Pls I need help on sidebar issue.
I noticed my sidebar element for tags and pages moves below the content area. I don't know what causes this shift but the homepage and categories, tags with plenty content doesn't have this issue.
It's just categories, tags and pages with few content that this sidebar shifts. I've attached an image of what I mean below.
I have left code snippet of the php sidebar code added, note the code was added in sidebar.php as short code.

HTML:
<aside id="text-29" class="widget widget_text"> <div class="textwidget"><div class="mobile-media-of-the-week">
<div class="title">
<img src="https://i.ibb.co/z4jHG8k/okh-music.jpg" />
</div>

<?php query_posts('category_name=music-of-the-week&showposts=1'); while (have_posts()) : the_post(); ?>
<div class="media-row">
<div class="media-image">
<a href="<?php the_permalink(); ?>" target="_blank" rel="noopener noreferrer"><img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" border="0"></a> </div>
<div class="media-content">
<h2><?php the_title(); ?></h2>
<a href="<?php the_permalink(); ?>" target="_blank" rel="noopener noreferrer">Download Here</a> </div>
</div>
<?php endwhile; ?>        <?php wp_reset_query(); ?>
</div>
</div>
</aside>





<aside id="text-30" class="widget widget_text"> <div class="textwidget"><div class="mobile-media-of-the-week">
<div class="title">
<img src="https://i.ibb.co/WzzYCrr/video-week.jpg" /> </div>

<?php query_posts('category_name=video-of-the-week&showposts=1'); while (have_posts()) : the_post(); ?>
<div class="media-row">
<div class="media-image">
<a href="<?php the_permalink(); ?>" target="_blank" rel="noopener noreferrer"><img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" border="0"></a> </div>
<div class="media-content">
<h2><?php the_title(); ?></h2>
<a href="<?php the_permalink(); ?>" target="_blank" rel="noopener noreferrer">Watch Here</a> </div>
</div>
<?php endwhile; ?>        <?php wp_reset_query(); ?>
</div>
</div>
</aside>
 

Attachments

  • Screenshot_20220902-205224.png
    Screenshot_20220902-205224.png
    268.9 KB · Views: 71

ajahtitus

Member
Contributor
Aug 24, 2021
60
29
18
https://t.me/pump_upp
t.me
The css code used..
CSS:
<style>
.mobile-media-of-the-week {
      margin-bottom: 20px;
    }

    .mobile-media-of-the-week .title img {
      width: 200px;
      display: block;
      margin-bottom: 5px;
    }

    .mobile-media-of-the-week .media-row {
      display: flex;
    }

    .mobile-media-of-the-week .media-image {
      flex: 0 0 100px;
      width: 100px;
      overflow: hidden;
    }

    .mobile-media-of-the-week .media-image img {
      height: 100px;
      width: auto;
      max-width: inherit;
    }

    .mobile-media-of-the-week .media-content {
      flex: 5;
      padding: 0 10px 0 20px;
      margin-top: 15px;
    }

    .mobile-media-of-the-week .media-content h2 {
      font-size: 1em;
      margin-bottom: 20px;
      margin-top: 0;
    }

    .mobile-media-of-the-week .media-content a {
      color: #ffffff;
      display: inline-block;
      padding: 2px 12px;
      border-radius: 5px;
      background-color: #6b1a1a;   
    }
    .mobile-media-of-the-week .media-link {
      flex: 5;
      padding: 0 10px 0 20px;
      margin-top: 15px;
    }

    .mobile-media-of-the-week .media-link h2 {
      font-size: 1em;
      margin-bottom: 20px;
      margin-top: 0;
    }

    .mobile-media-of-the-week .media-link a {
      display: inline-block;
      padding: 2px 12px;
      border-radius: 5px;   
    }
</style>
 

ajahtitus

Member
Contributor
Aug 24, 2021
60
29
18
https://t.me/pump_upp
t.me
Author?

If it's mh magazine, then put the features you added to the sidebar section. No need adding any sidebar css
The author is Pedro. Yes, I added the changes I made to sidebar.php
PHP:
<br>

<?php get_template_part( 'naijamp3tv.com/trending-songs' ); ?>

<?php get_template_part( 'naijamp3tv.com/latestgospelsongs' ); ?>

<?php dynamic_sidebar('Sidebar'); ?>

<?php get_template_part( 'naijamp3tv.com/stay-connected' ); ?>

But its behaving that way, don't know why
 

ajahtitus

Member
Contributor
Aug 24, 2021
60
29
18
https://t.me/pump_upp
t.me
ok I added few sidebar in archive.php
Code:
<?php get_header(); ?>

<div class="khodex-title" style="margin: 15px;"><i class="fa fa-tag" style="color: #ff0"></i> <?php wp_title('', true, 'right'); ?></div>

<div class="mh-wrapper mh-clearfix">
    <div id="main-content" class="mh-loop mh-content" role="main"><?php
        mh_before_page_content();
        if (have_posts()) { ?>

            
         <header class="page-header1"><noscript><?php
                the_archive_title('<h1 class="page-title">', '</h1>');
                if (is_author()) {
                    mh_magazine_lite_author_box();
                } else {
                    the_archive_description('<div class="entry-content mh-loop-description">', '</div>');
                } ?></noscript>
            </header>
        

<?php
            mh_magazine_lite_loop_layout();
            mh_magazine_lite_pagination();
        } else {
            get_template_part('content', 'none');
        } ?>
    </div>

    <?php get_template_part( 'dark/trending-songs' ); ?>
<?php get_template_part( 'dark/stay-connected' ); ?>
    <br>   
</div>
<?php get_footer(); ?>
 

Pedro

Forum Admin
Staff member
Trusted Uploader
Contributor
Aug 21, 2021
1,439
2
2,232
113
Genesis Forum
storefront.com.ng
The author is Pedro. Yes, I added the changes I made to sidebar.php
PHP:
<br>

<?php get_template_part( 'naijamp3tv.com/trending-songs' ); ?>

<?php get_template_part( 'naijamp3tv.com/latestgospelsongs' ); ?>

<?php dynamic_sidebar('Sidebar'); ?>

<?php get_template_part( 'naijamp3tv.com/stay-connected' ); ?>

But its behaving that way, don't know why
I am talking about your css. That's, the css styling the features.

In summary, you should know what you're doing or hire.
 
AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock    No Thanks