• About
  • Advertise
  • Privacy & Policy
  • Contact
GLOBAL हिन्दी
Advertisement
  • Global हिन्दी
  • मनोरंजन
  • लाइफ स्टाइल
  • टेक्नोलॉजी
  • ऑटो
  • नॉलेज
  • बायोग्राफी
  • फ़ूड
No Result
View All Result
  • Global हिन्दी
  • मनोरंजन
  • लाइफ स्टाइल
  • टेक्नोलॉजी
  • ऑटो
  • नॉलेज
  • बायोग्राफी
  • फ़ूड
No Result
View All Result
GLOBAL हिन्दी
No Result
View All Result
  • Global हिन्दी
  • मनोरंजन
  • लाइफ स्टाइल
  • टेक्नोलॉजी
  • ऑटो
  • नॉलेज
  • बायोग्राफी
  • फ़ूड
Home Uncategorized

CSS Styling

GH by GH
September 21, 2018
in Uncategorized
0
0
SHARES
11
VIEWS
Share on FacebookShare on TwitterShare on Whatsapp

In Comparison to the original Volume which required over 350 lines of CSS, Volume remastered uses less that 50. But why do we need CSS when Blocks does it all? I hear you ask. Well there are somethings that i just like to tweak and sometimes a little CSS is required.

The CSS added to the Site can be found in Customizer > Additional CSS. Lets take a closer look at what each of them does

Post navigation

the default behaviour of the Post Navigation Block Element is to display a 50/50 row showing the previous and next post. The following CSS removes the empty space when a user is on the first or last post so the block spans the full width.

/* Custom Post Navigation remove empty classes */
.featured-navigation .gb-grid-column:empty {
    flex: 0 1;
}

@media(min-width: 769px) {
    .featured-navigation .gb-grid-column:not(:empty) {
        flex: 1 0;
    }
}

Single Post Featured Images

the following CSS adjusts the featured image background size for tablet, and removes it from Mobile

/* Single Post Hero image responsive controls */
@media(max-width: 1024px) and (min-width: 769px) {
    .page-hero-block:before {
        background-size: cover;
    }
    .featured-column,
    .featured-column img.wp-post-image {
        width: 100% !important;
    }
}

@media(max-width: 768px) {
    .page-hero-block:before {
        background: none;
    }
}

Post Archives align meta to bottom of post

A simple flex box CSS to push the last element in the post-summary ( the post meta ) to align vertically at the bottom of the post.

/* Post Archives - force post meta to vertically align bottom */
.generate-columns-container .post>.gb-container,
.generate-columns-container .post>.gb-container>.gb-inside-container,
.post-summary>.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-summary {
    flex: 1;
}

.post-summary>.gb-inside-container>*:last-child {
    margin-top: auto;
}

Border radius on post archive images

/* Add border radius to post archive images */
.generate-columns-container .dynamic-featured-image {
    border-radius: 4px;
}
GH

GH

  • Trending
  • Comments
  • Latest
लड़कियां अकेले में Google पर करती हैं ये 5 चीजें सबसे ज्यादा Search, दूसरा नंबर वाला जानकर आ जाएगी हंसी

लड़कियां अकेले में Google पर करती हैं ये 5 चीजें सबसे ज्यादा Search, दूसरा नंबर वाला जानकर आ जाएगी हंसी

June 17, 2022
Gold Price Today : सोना ग्राहकों के चेहरे पर लौटी मुस्कान, 10 ग्राम गोल्ड की खरीदारी पर मिल रहा तगड़ा फायदा, जानिए ताजा कीमत

Gold Price Today : सोना ग्राहकों के चेहरे पर लौटी मुस्कान, 10 ग्राम गोल्ड की खरीदारी पर मिल रहा तगड़ा फायदा, जानिए ताजा कीमत

June 17, 2022
Chilli garlic paneer: मार्केट के चिल्ली गार्लिक पनीर से भी मिलेगा बेहतर स्वाद, आज ही घर पर ट्राई करें यह रेसिपी

Chilli garlic paneer: मार्केट के चिल्ली गार्लिक पनीर से भी मिलेगा बेहतर स्वाद, आज ही घर पर ट्राई करें यह रेसिपी

June 17, 2022
Matka Kulfi : मटका कुल्फी सिर्फ 2 मिनट में कैसे बनाएं

Matka Kulfi : मटका कुल्फी सिर्फ 2 मिनट में कैसे बनाएं

May 8, 2022
Sonakshi Sinha ने सलीम खान के बेटे से शादी करने के चंद दिनों पहले ही मुंडवा लिया था अपना सिर,जाने खबर के पीछे की पूरी सच्चाई

Sonakshi Sinha ने सलीम खान के बेटे से शादी करने के चंद दिनों पहले ही मुंडवा लिया था अपना सिर,जाने खबर के पीछे की पूरी सच्चाई

0

How to change the colors

0

CSS Styling

0

Block Elements – Theme Builder

0
Sonakshi Sinha ने सलीम खान के बेटे से शादी करने के चंद दिनों पहले ही मुंडवा लिया था अपना सिर,जाने खबर के पीछे की पूरी सच्चाई

Sonakshi Sinha ने सलीम खान के बेटे से शादी करने के चंद दिनों पहले ही मुंडवा लिया था अपना सिर,जाने खबर के पीछे की पूरी सच्चाई

July 24, 2022
Saif Ali Khan की पत्नी की गुज़री है इस क्रिकेटर के साथ कई राते, लेकिन चाहकर भी नही कर पाई शादी ये थी वजह

Saif Ali Khan की पत्नी की गुज़री है इस क्रिकेटर के साथ कई राते, लेकिन चाहकर भी नही कर पाई शादी ये थी वजह

July 24, 2022
Saif Ali Khan की बेटी सारा अली खान की बढ़ने लगी है रजनीकांत के दामाद के साथ नज़दीकियाँ, बन सकती है शादी करके उनकी दूसरी पत्नी देखे तस्वीरें

Saif Ali Khan की बेटी सारा अली खान की बढ़ने लगी है रजनीकांत के दामाद के साथ नज़दीकियाँ, बन सकती है शादी करके उनकी दूसरी पत्नी देखे तस्वीरें

July 24, 2022
बिना बिजली चलते हैं Solar Power Generator, पूरा घर रहेगा रोशन, जानें कीमत

बिना बिजली चलते हैं Solar Power Generator, पूरा घर रहेगा रोशन, जानें कीमत

July 24, 2022

Recent News

Sonakshi Sinha ने सलीम खान के बेटे से शादी करने के चंद दिनों पहले ही मुंडवा लिया था अपना सिर,जाने खबर के पीछे की पूरी सच्चाई

Sonakshi Sinha ने सलीम खान के बेटे से शादी करने के चंद दिनों पहले ही मुंडवा लिया था अपना सिर,जाने खबर के पीछे की पूरी सच्चाई

July 24, 2022
Saif Ali Khan की पत्नी की गुज़री है इस क्रिकेटर के साथ कई राते, लेकिन चाहकर भी नही कर पाई शादी ये थी वजह

Saif Ali Khan की पत्नी की गुज़री है इस क्रिकेटर के साथ कई राते, लेकिन चाहकर भी नही कर पाई शादी ये थी वजह

July 24, 2022
Saif Ali Khan की बेटी सारा अली खान की बढ़ने लगी है रजनीकांत के दामाद के साथ नज़दीकियाँ, बन सकती है शादी करके उनकी दूसरी पत्नी देखे तस्वीरें

Saif Ali Khan की बेटी सारा अली खान की बढ़ने लगी है रजनीकांत के दामाद के साथ नज़दीकियाँ, बन सकती है शादी करके उनकी दूसरी पत्नी देखे तस्वीरें

July 24, 2022
बिना बिजली चलते हैं Solar Power Generator, पूरा घर रहेगा रोशन, जानें कीमत

बिना बिजली चलते हैं Solar Power Generator, पूरा घर रहेगा रोशन, जानें कीमत

July 24, 2022
GLOBAL हिन्दी

INNLive bring for you the best Premium perfect for news, magazine, personal blog, etc. Check our landing page for details.

Follow Us

Browse by Category

  • Uncategorized
  • ऑटो
  • टेक्नोलॉजी
  • नॉलेज
  • फ़ूड
  • बायोग्राफी
  • मनोरंजन
  • लाइफ स्टाइल
  • वेकेंसी

Recent News

Sonakshi Sinha ने सलीम खान के बेटे से शादी करने के चंद दिनों पहले ही मुंडवा लिया था अपना सिर,जाने खबर के पीछे की पूरी सच्चाई

Sonakshi Sinha ने सलीम खान के बेटे से शादी करने के चंद दिनों पहले ही मुंडवा लिया था अपना सिर,जाने खबर के पीछे की पूरी सच्चाई

July 24, 2022
Saif Ali Khan की पत्नी की गुज़री है इस क्रिकेटर के साथ कई राते, लेकिन चाहकर भी नही कर पाई शादी ये थी वजह

Saif Ali Khan की पत्नी की गुज़री है इस क्रिकेटर के साथ कई राते, लेकिन चाहकर भी नही कर पाई शादी ये थी वजह

July 24, 2022
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2022 INNLive -Design & Develop by SEOGURU.

No Result
View All Result
  • Global हिन्दी
  • मनोरंजन
  • लाइफ स्टाइल
  • टेक्नोलॉजी
  • ऑटो
  • नॉलेज
  • बायोग्राफी
  • फ़ूड

© 2022 INNLive -Design & Develop by SEOGURU.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In