[StephenD]

Hi,

I've resolved this. It's not a perfect solution but it works.

This is what I did.

1) Made a copy of single.php and renamed it page.php
2) Uploaded the new page.php file to the theme folder

For some reason there was a large gap between the navigation menu and the featured image, and the entry title was left-aligned, so I:

3) Added the following custom body class - single - to fix the space issue
4) Added the following CSS code to center align the page title:

.single .entry-title {
        text-align: center;
 }

[StephenD]

Hi Nettbrygga,

Thank you so much for your help. Your solution worked and I'm finally happy with the way the site looks on a smartphone so I can pass it over to the client for a final checkover.

Thank you once again.

Stephen

[StephenD]

Here it is again:

Sure - http://fp.digitalinternet.co.uk

I changed the background colour of the header section to black while I'm working on this section. The background colour should be the same as the logo's background.

Initially I used a smaller version of the main logo for the mobile section, but I've changed it to this one and added the URL of this one to the stylesheet - http://fp.digitalinternet.co.uk/wp-content/uploads/2016/11/full-logo-360.png

I've tweaked the CSS today so the site might look a bit weird!

Thanks for your help. I hope it's something simple that I'm just not seeing.

[StephenD]

This reply has been marked as private.

[StephenD]

Hi,

Thanks for your reply and suggestion.

I tried changing the max-width to 800px but it didn't work.

Yes, you have read the question correctly - the smaller image never shows on smaller screens, just the larger image.

I double-checked the path to the image and it's correct.

[Author]

Posts