Support » Theme: MH FeminineMag » Unable to center text and images

  • Resolved cnor

    (@cnor)


    I’m trying to center each text and button related to each image of this page:
    cnorcreative.com/corbyssimas

    I’m using the following css:

    .pt-cv-readmore . btn .btn-success{
    
    display: block;
    margin: 0 auto;
    margin-right: auto;
    
    top: 50%;
    transform: translate(0, 300%)
    
    }
    
    .pt-cv-title{
    text-align: center;
    
    padding-left: 40px;;
    /* 2 /
    top: 50%; / 3 */
    transform: translate(0, 300%)
    }
    
    .pt-cv-content{
    
    padding-left: 40px;
    position: relative; /* 2 /
    top: 50%; / 3 */
    transform: translate(0, 100%)
    
    }
    
    .pt-cv-meta-fields{
    text-align: center;
    
    padding-left: 40px;
    /* 2 /
    top: 50%; / 3 */
    transform: translate(0, 400%)
    
    }

    I’ve tried also with:

    display: block;
    margin: auto;

    with no success.

    What am I doing wrong?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi cnor,

    thanks for using MH FeminineMag.

    It seems you’ve heavily customized the theme and the classes and CSS code you’re using is not related to the theme.

    You could always use your browsers inspection tool to determine if your code has been applied correctly and if there is any other code on your site that is interfering with your modifications.

    In general you could just center the content with:

    .pt-cv-content { text-align: center; }

    However, please keep in mind that some of the elements on your site are positioned absolute and you may want to apply further customizations in order to align everything properly.

    Thank you for your reply. Yes indeed I’ve customized it quite a bit. The problem it seems is that I’m trying to center a text of a plugin called Content Views, not the content of the theme.
    I’ve managed to center the text alongside the images of the posts with the following css:

    @media screen and (min-width: 960px) {
    
    .pt-cv-content {
    position: relative;
    
    }
    
    .pt-cv-readmore {
       position: absolute;
      top: 110%;
      left: 55%;
      transform: translate(-50%, -50%);
    
    }
    
    .pt-cv-title{
       position: absolute;
      top: 20%;
      left: 67%;
      transform: translate(-50%, -50%);
    }
    
    .pt-cv-content{
    text-align:center;
      position: absolute;
      top: 40%;
      left: 67%;
      transform: translate(-50%, -50%);
    }
    
    .pt-cv-meta-fields{
     position: absolute;
      top: 70%;
      left: 67%;
      transform: translate(-50%, -50%);
    
    }
    
    }

    It works fine on desktops.
    The only problem is that it’s not displaying correctly on mobile and tablet, leaving a huge gap between the image and the text.
    I’ve tryed media query for smartphone with lower top %, but it seems its not working.

    ps – I’ve tried to post this on the plugin (Content views) support forum but it doesnt let me saying its a duplicate post.

    After taking a quick look at your website it seems that the main issue is that floats aren’t cleared and you may need to adjust the elements which are positioned absolute as their position probably isn’t suitable anymore on mobile.

    However, this isn’t really related to your WordPress theme and can’t be covered in this free theme support forum. You could check with the plugin developers if they offer free customization support and in case you can’t post a similar thread in their forums, you could post a different thread and refer to this one.

    ok. Thanks again for your reply. I will see what I can do in the plugin forum.
    Thanks for building and offering such a nice theme.

    You’re very welcome and we’re happy that you like the theme. 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Unable to center text and images’ is closed to new replies.