Help with some css
-
Hello, I am having some trouble with the website I am building for a professor. I can’t get the text for the front page of the Moth book with line up in the middle. I am currently using the theme Sela. An example of what I want to achieve is this http://gillian-flynn.com/. You see how she has a her front page spaced out and her text next to the book.
Thanks a bunch!
The blog I need help with is: (visible only to logged in users)
-
Can you clarify whether you’d like three columns – the book on the left, the quote in the middle, and the author photo on the right?
That can be done with some HTML & CSS, but let’s confirm what you’re trying to do first. Thanks!
-
Yes! that is exactly what I am trying to do! The quote in the middle, the book on the left, and the authors photo on the right. I would also like to expand the entire page to the screen, but when I try to do full width and do padding and margin set to 0px, there is still some space left on the sides.
Thank you so much!
-
You can try something like this:
In the page editor’s HTML view:
<div class="bookcover"> <img class="wp-image-82" src="https://thomasheisenet.files.wordpress.com/2016/12/screen-shot-2017-01-24-at-3-57-27-pm.png" alt="screen-shot-2017-01-24-at-3-57-27-pm" width="348" height="564" /> </div> <div class="bookblurb"> <h1>MOTH; OR, HOW I CAME TO BE WITH YOU AGAIN</h1> <h3>“It's impossible to convey in a few lines the enormous pleasures of this book–the beauty of the design, the incandescent prose, its rigor and intelligence. A deeply melancholic and moving work of art.”</h3> <div class="blurbauthor">—Carole Maso, author of <em>The Art Lover</em></div> </div> <div class="authorphoto"><img class="size-full wp-image-194" src="https://thomasheisenet.files.wordpress.com/2017/02/heise-photo1-e1486616474971.jpg" alt="heise-photo" width="564" height="347" /></div>In your CSS editor:
@media screen and (min-width: 600px) { .bookcover { float: left; width: 25%; } .authorphoto { float: right; width: 25%; } .bookblurb { float: left; margin-left: 20px; margin-right: 20px; width: 40%; } } .blurbauthor { font-family: "Oswald",sans-serif; font-size: 18px; }Putting the positioning in a media query keeps the theme responsive, so it’s readable on smaller screens like phones.
I would also like to expand the entire page to the screen,
I really don’t recommend that, as some folks have really large monitors that will stretch out your pages so wide that your text will be very difficult to read with such long lines.
-
Forgot to mention that you can adjust the widths on the three elements if you’d like one to take up more or less space. Just don’t go over 100% in total or the layout will break. ;)
-
-
Actually I do have another problem. For the About Thomas page, I want two columns but I want the words to look wider and more spread out next to the picture. Is there any way you can do that? so picture on the left and paragraph on the right side.
-
For the About page I would suggest using the built-in image alignment option instead of colummns, so the text flows around the image nicely. It will automatically resize on small screens as well, so everything stays readable on mobile devices.
1. Remove the divs from this page, you don’t need them here
2. Move your image below the header
3. Click the image and choose right- or left-alignment icons to align it, as you see here: https://en.support.wordpress.com/images/image-settings/#within-posts -
The page looks very spacey , anyway to fix that? Is there anyway to add text sections through css?
-
Small pieces of text can be added with CSS but it’s really not the best way to add text — working with the post editor and text widgets is a better option.
If you need further help with something specific, please start a new thread and provide a link to the page you need help with.
- The topic ‘Help with some css’ is closed to new replies.
WordPress.com Forums 