#135779 Mobile post title font and css

Landing Forums Jupiter WordPress Theme Mobile post title font and css

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • Robert Helle

    Hi.

    Could you help me change two things on my Jupiter site:

    1. Reduce the font size for mobile phones on post titles by approx 4px.
    2. Put the title on posts to the bottom left with a small padding below it, but keep the author and date, still below the title and left aligned.

    Over the years you helped me with a lot of css code. I will paste the css thats there today below so you can have a look. If any of this css now is somewhat duplicate and I can delete some of it I would appreciate any advise. Thanks.
    omhelse.no

    CSS on site today:

    /*.row-auto{
    height: auto !important;
    }*/

    .mk-header:after {
    content: ” “;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: black;
    opacity: 0.4;
    }
    .page-title {
    text-align: center;
    }
    @media (min-width: 1140px){
    #mk-page-introduce.intro-left {
    text-align: center;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    }
    @media screen and (min-width: 768px) and (max-width: 980px) {
    .page-title {font-size: 36px !important;}
    }
    @media screen and (min-width: 480px) and (max-width: 768px) {
    .page-title {font-size: 24px !important;}
    }
    @media screen and (max-width: 480px) {
    .page-title {font-size: 24px !important;}
    }
    @media screen and (max-width: 1140px) {
    .page-title {text-align: center !important;}
    }

    a:hover:link {
    text-decoration: underline !important;
    }
    }
    @media {.wp-caption {
    width: 100% !important;
    }}
    .master-holder.blog-style-bold .mk-blog-single {
    padding: 0px 0 !important;
    }
    .mk-blog-hero.bold-style .mk-author-avatar {
    display: none;}

    @media screen and (max-width: 480px){
    .mk-blog-hero.bold-style{
    height: 350px !important;
    }
    }
    .has-mega-menu>ul.sub-menu>li>ul.sub-menu li.menu-item a.menu-item-link {
    padding: 5px 10px !important;
    line-height: 10px !important;
    }
    #menu-item-2666 .has-mega-menu>ul.sub-menu>li.menu-item {
    marign-top: 50px;
    }
    .has-mega-menu>ul.sub-menu>li>ul.sub-menu {
    height: 250px;
    }
    .main-navigation-ul > li.menu-item > a.menu-item-link:hover {
    text-decoration: none !important;
    }
    /* Mega menu titles and paddin fix */
    .has-mega-menu>ul.sub-menu>li>ul.sub-menu li.menu-item a.menu-item-link {
    padding: 3px 10px;
    }
    .has-mega-menu .megamenu-title {
    padding: 10px 10px 0px 10px;
    }
    .pagnav-wrapper .pagenav-category {
    display: none !important;
    }
    .wp-caption {
    width: 100% !important;
    }
    @media only screen and (min-width: 1200px){
    .master-holder h2{
    font-size: 25px;
    }
    }
    /* Mobile */
    @media only screen and (max-width: 961px){
    .master-holder h2{
    font-size: 18px;
    }
    }
    @media only screen and (min-width: 1200px){
    .master-holder h3{
    font-size: 16px;
    }
    }
    /* Mobile */
    @media only screen and (max-width: 961px){
    .master-holder h3{
    font-size: 12px;
    }
    }

    @media (max-width: 480px){.mk-blog-hero.bold-style {
    min-height: 200px !important;
    }}
    .mk-blog-hero.bold-style::before {
    background-color: #000;
    opacity: 0.4!important;
    }
    .mk-blog-hero.bold-style {
    background-position: center center;
    }
    a.mk-blog-print {
    display: none!important;
    }
    #mk-page-introduce {
    padding: 200px 0 !important;
    }

    .postid-8156 .single-social-section,
    .postid-8188 .single-social-section{
    display: none;
    }
    .postid-8156 a.mk-post-nav.mk-post-prev.with-image {
    display: none;
    }

    .single-social-section {
    display: none !important;
    }

    .mk-single-content {
    margin-top: 0;
    }
    .mk-header-social.header-section.hidden {
    visibility: visible !important;
    opacity: 1 !important;
    }

    @media (max-width: 767px) {
    .mk-subscribe .mk-subscribe–form-column {
    display: block;
    }
    }
    .yikes-easy-mc-form .yikes-easy-mc-submit-button {background: #a4794d; border-color: #a4794d; color: white;}
    .yikes-easy-mc-form .yikes-easy-mc-submit-button:hover {background: #664328; border-color }
    .click-custom-box-holder{
    cursor:pointer;
    }
    .artist {
    cursor: pointer;
    }
    @media handheld, only screen and (max-width: 1140px){
    body .add-header-height {
    height: 85px!important;
    }}
    .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_author p, .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_date p {
    margin-bottom: 0 !important;
    }

     

    Amir Rather Support Team

    Hi Robert,

    The CSS seems ok, you can add the below for Post Title Size on Mobiles:

    /* Mobile Post Titles */
    @media only screen and (max-width: 768px){
    .master-holder h6{
    font-size: 14px !important;
    }}
    

    > “Put the title on posts to the bottom left with a small padding below it, but keep the author and date, still below the title and left aligned.”

    Do you mean to Put the Date ad Author below the title and left-aligned? It is currently above the title.

    Regards

    Robert Helle

    Hi Amir. Thanks. But nothing happens on front end after adding that css. Currently the date and author is below the title right? I am looking to keep it that way but left align title and date/author to the bottom of the image, with a small padding so that it looks nice.

    Also smaller font on mobile. Thanks man.

    Amir Rather Support Team

    Hi

    I added the CSS on line 1 it seems to be working now.

    The Author and Date are above Title https://take.ms/5j7ue you want them on two lines aligned left?

    Regards

Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.
Login