CSS coding to amend image placement in Libre theme ?

charldbennett · Member · Jun 17, 2016 at 4:22 pm
Copy link

Add topic to favorites
Hi there! i have two questions: one is, is there any way of adding the “featured image” from a post to the home page of the Libre theme? It would be so much better if I could put an image on the left sidebar underneath the post title. The second question is, is there any way of extending the header image to the full width of a desktop screen? The site looks really good on mobile and tablet but would just do the trick if I could extend that header image out to it’s full potential. I realise there’s no way to do these things inside the usual theme so if anyone has some CSS coding for a beginner that might help.. appreciated! Thanks in advance :)

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 17, 2016 at 8:05 pm
Copy link
The site elements are enclosed in an overall div, but with the way that Libre HTML and CSS are structured, we can do this. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and then see what you think. Make sure and narrow and widen your browser window and make sure nothing goes awry, and also check on a phone and tablet if you can and let me know if you see any problems. In my testing all looks good, but check and make sure.
```
.site {
    width: 100%;
}
.site-header, .site-content, .site-footer {
    max-width: 68em;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.custom-header {
    width: 100%;
}

@media screen and (max-width: 879px) {
    .site {
        padding-left: 0;
        padding-right: 0;
    }
}
```
charldbennett · Member · Jun 18, 2016 at 10:05 am
Copy link
Perfect! Just need a higher resolution image so it looks a bit better. Thank you!! :)
thesacredpath · Member · Jun 18, 2016 at 6:37 pm
Copy link
Awesome, and you are welcome!

No items found.