What's new

Welcome to StoreFront Forums

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

REQUEST Request for css code to align sidebar properly

ajahtitus

Member
Joined
Aug 24, 2021
Messages
51
Reaction score
23
Points
8
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: 4

ajahtitus

Member
Joined
Aug 24, 2021
Messages
51
Reaction score
23
Points
8
Tag with fewer content
 

Attachments

  • Screenshot_20220902-210239.png
    Screenshot_20220902-210239.png
    199.9 KB · Views: 3

ajahtitus

Member
Joined
Aug 24, 2021
Messages
51
Reaction score
23
Points
8
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
Joined
Aug 24, 2021
Messages
51
Reaction score
23
Points
8
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
Joined
Aug 24, 2021
Messages
51
Reaction score
23
Points
8
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
Joined
Aug 21, 2021
Messages
1,189
Reaction score
817
Points
113
Location
Genesis Forum
Website
genesis.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.
 
shape1
shape2
shape3
shape4
shape7
shape8
Top
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