responsive background images for a single page

Hi there! It sounds like you want some very specific tweaks to this theme, that adapt to different screen sizes responsively. Since you didn’t provide a link to your site, it is extremely difficult to help with specific CSS, so I’m going to point you to some general resources for now. If you can come back and provide a link to your site in progress, I’ll be glad to have a look if you’re still stuck on anything.

—

Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/

You can learn more about using media queries that target certain screen sizes here:

https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Hello Kathryn,
thanks for your reply and your useful links!

The website I’m referring to is raphaelaklein.at

In the meantime, I solved it SOMEHOW. I did to the code which I pointed out in the following image:
https://i2.wp.com/www.raphaelaklein.at/wp-content/uploads/2016/01/lo%CC%88sungsversuch2016-01-24.jpg

I tried to simply reduce the opacity of the image in the first place. But since this also effected the opacity of the text, I’m now using two different images basically.
If you (or somebody else) has better solutions – don’t hesitate to post them here!

Unfortunately, some other questions occurred:

1. On the portfolio page, there would be enough space for yet another two projects in the ultimate row. Though, it creates another, a second page for the portfolio, where only one project is displayed (which I don’t like).
Is it possible to change the portfolio page in a way, so there are all the projects on one page?

2. Although the theme says it is not possible, but maybe there’s a trick to do it though:
How can I / Can I at all change the URL of the portfolio page, which says currently “raphaelaklein.at/work” to “raphaelaklein.at/portfolio”? This way it just looks like I would have forgotten to adapt the page name.

3. On the contact page, I inserted some icons. Unfortunately, the enormous spacing between the lines makes them look quite ugly. I tried solving this by putting them all in a <div> and allocate a class, which says style="line-height: 70%; – but this doesn’t work. Anybody has another approach to solve this?

Thanks again!

Update:

I found out how to control the number of projects shown on one page:
As I’m using Jetpack and have the Custom Content Types enabled, I just went to “Settings” in my dashboard and changed the number of the project. Nothing easier than that.

More information here – https://en.support.wordpress.com/portfolios/

2. Although the theme says it is not possible, but maybe there’s a trick to do it though:
How can I / Can I at all change the URL of the portfolio page, which says currently “raphaelaklein.at/work” to “raphaelaklein.at/portfolio”? This way it just looks like I would have forgotten to adapt the page name.

It’s not possible to use the “portfolio” slug since that’s reserved by Jetpack for the automatically generated portfolio archive.

3. On the contact page, I inserted some icons. Unfortunately, the enormous spacing between the lines makes them look quite ugly. I tried solving this by putting them all in a <div> and allocate a class, which says style=”line-height: 70%; – but this doesn’t work. Anybody has another approach to solve this?

I had a look at your contact page but the spacing doesn’t seem unusually loose. Did you still need help with it?

https://www.raphaelaklein.at/contact/

I do see some stray /* and */ that you’ll probably want to remove. Those types of comment tags can’t be used within HTML as they’ll show up as if they were regular text, as you see here.

2) That’s sad, but ok.

3)
Oh yes, the /* are an error. Thanks ??

About the line spacing: As you can see at the following image, there’s a difference between the line spacing at normal text (one of the portfolio project sites) and the text in the contact site. Is there a way to make it more narrow?

https://i0.wp.com/www.raphaelaklein.at/wp-content/uploads/2016/02/line-spacing-demonstracion.png

Kind regards,
Raphaela

Ah, that’s because one is showing line spacing within a paragraph, and on the contact page each icon is an individual paragraph.

You can change the space between paragraphs on your contact page by adding some custom CSS like this:

.post-51 .entry-content p {
  margin-bottom: 10px;
}

Adjust the value as you like.

Ooooh thank you very much! That’s exactly what I needed!

I think it’s a huge problem for me to change anything when I don’t know how the parts are called I want to change. It’s because I just know veeery basic html, css & co.. and neither do a have an idea of this theme. Do you have a trick to find out the names of particular parts of the theme? Or where could I look to find out?

Kind regards,
Raphaela

Glad that did the trick!

Learning how to target the right elements in your site will definitely help you make certain design and layout changes with CSS. Here are some very helpful posts that will help you figure out which elements to target:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/