I have been having a problem with the styles on my custom blog theme that I'm making. When I create a post and then publish it what the post looks like in the back end is different to the front end, The back end is laid out nice and how I want and then in the front end it does not have line spaces/line breaks, Also images will not fully stretch to the full width of the what I have in the back end.

I did add these styles before to allow me to align images and that worked fine, but I am wondering if there is other styles I need to add to make the paragraphs have spaces in-between paragraphs and able to full width the images.

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;

I was looking at post format does that have something to do with it?

This is the php/html page it the single.php page.

while(have_posts()) {
    the_post(); ?>
    <div class="burger-menu-container">
      <ul class="burger-ul">
      <li class="burg-menu"><a class="burger-link" href="<?php echo site_url() ?>">Home</a></li>
        <li class="burg-menu"><a class="burger-link" href="<?php echo site_url('/blog') ?>">blog</a></li>
        <li class="burg-menu"><a class="burger-link" href="<?php echo site_url('/about-us') ?>">About Us</a></li>
        <li class="burg-menu"><a class="burger-link" href="<?php echo site_url('/contact-us') ?>">Contact Us</a></li>
        <li class="burg-menu"><a class="burger-link" href="<?php echo site_url('/private-policy') ?>">Privacy policy</a></li>
        <li class="burg-menu"><a class="burger-link" href="<?php echo site_url('/cookie-policy') ?>">Cookie policy</a></li>
        <li class="burg-menu"><a class="burger-link" href="<?php echo site_url('/site-map') ?>">Sitemap</a></li>

      <div class="copyright-container">
        <span class="hamberger-copyright">www.website.com © THE WEBSITE NAME 2020</span>

    <div class="top-box-container">
      <div class="box-top-wrapper">
        <div class="box-top-container">
         <div><a class="toppy-one" href="<?php echo site_url('/blog') ?>"> <div class="top-box-one"><i class="fas fa-home"></i><p class="intro-blog-tab"> Blog Home</p></div></a></div>
         <div class="top-box-two box-single-page">Posted by<?php the_author_posts_link(); ?> on <?php the_time('n.j.y') ?> in <?php echo get_the_category_list(', '); ?></div>


    <?php }
     <div class="internal-middle-section-container">         
      <div class="internal-content">
       <div class="inner-content-container">
        <div class="internal-write"> <?php the_content() ?></div>

 <!-- </div>   
</div> -->



here are the images of the editor in WordPress backend and the front end.

view in the editor

This is the view of the front end

In this example i not sure why the line breaks are not appearing on the front end.

any help I would be grateful thanks

  • Please link us to the malfunctioning page or show all of the code that's being affected, including the PHP/HTML. That's the best way for us to help you.
    – Pixelsmith
    Commented Sep 27, 2021 at 17:08
  • 1
    I have added the code of the effected page which is the single.php page to display the content of my posts and i added couple of images thanks.
    – luke
    Commented Sep 28, 2021 at 17:17

1 Answer 1


I managed to sort the problem by adding this CSS to the bottom of my main-styles.css file

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;

It also fixed all the issues with the images that I mentioned above and the line breaks that were not appearing on the front end. The WordPress editor and the front all marry up now.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.