How can I make my website look the same on all devices even on mobile phones?

Let me know if you need me to explain further.

My idea goes as follows:

The masthead background image is added to Customize > Theme Design > Page. It should repeat so we only need a small section of the image. It must be pink, then the pattern as indicated by my green square and label (Masthead background).

Logo (Theme Settings > Logo). Change that as indicated. No pattern, just the logo itself.

Once you’ve cut out the swirls, top left and the bow on the right, upload both to the Media Library and send me the link for each one.

This is just an example:

https://siteorigin.com/wp-content/uploads/2015/08/example-masthead.png

That’s ideally how your masthead background image should look. We’ll then repeat it across the header.

Mmm this might be more complicated than I had hoped. If possible, please can I take a quick look logged in. Instructions to follow.

Mmm ok we’re part of the way there.

Can you make your logo a transparent PNG for us? It would involve the symbol and text with a transparent background saved as a PNG. It would help.

Check the site now. We can only make the logo as high as the background image. This is the masthead background image I’m using. I made it:

http://www.amandasworldofcake.co.uk/wp-admin/upload.php?item=1102

Well I cropped it rather.

Because the pink isn’t one color, it varies, we can only make the logo as high (tall) as the height of this image.

In Custom CSS I’m restricting the logo height here:

#masthead .hgroup .logo img {
  max-height: 124px;
  width: auto;
}

If you make the pink part of the masthead bg taller we can make the logo taller.

Let me know, we can go from there.

Nice. Looking good. Let me take another look.

I’ve shifted Custom CSS over to our theme built in Custom CSS and disabled Simple Custom CSS plugin. Our built in Custom CSS has revision history which makes it a bit safer. In the future if you change to a theme without Custom CSS you can enable the plugin again. Hope that’s cool :)

That’s it. Appearance > Custom CSS (Vantage version) is update safe. Very much the same as the plugin.

I’ll take a look now. Thanks.

Ahh sorry for not mentioning this earlier. The header swirl, bottom swirl and bow. Please, can we get those as PNG’s without the header stripe in them. Just the swirl/bow with a transparent background. That’ll give us the reliable loading across browsers you’re after because we don’t have to match up the background. If it’s out by a pixel or two in a different browser, it won’t be at all obvious.

Thanks. Where does the second swirl go?

This is a bit more than we usually try take on from the support side of things. I’ll do my best to finish what we started :)

Here is a child theme:

https://siteorigin.com/wp-content/uploads/2015/08/vantage-child-mandy-01.zip

Download the ZIP to your desktop.
Install from Appearance > Themes > Add New.
Activate.
Activating a child theme will cause Customizer and menu location settings to reset.
Test and then switch back to the parent them if necessary.
Once issue that’ll jump out is that the images for the bow and swirls are pretty big. Do you want us to constrain those using CSS?

That's expected. Activating a child theme resets the Customizer. You'll need to go to Appearance > Customize > Theme Design and redo those settings. Assuming you are happy with the child theme. The child theme introduces the new elements.

You can switch back to the parent at Appearance > Themes.

No problem. What problems did you run into?

No problem. If you’d like to re-look at things just let us know.

All the best :)