A small problem when resizing the page

Shapely
1

Hi,

I use Wordpress 4.8.2 and Shapely theme. I created the one-page using Shapely Parralax in widgets. In one Parralax Section For FrontPage I wanted to use a background image and an image. As I wasn’t given the choice by the widget I decided to put some code in content:

<h3><img src="http://localhost/safeport/wp-content/uploads/2017/09/SHPMN.jpg" alt="SM" align="right" style="max-width:100%"><p style="font-family:arial;text-align:left"><b>Ship Maintenance</b></p></h3>

<p style="font-size: 18px;text-align:left">We are active in arranging Shiprepairs,<br>Underwater Inspections, Cleaning & Repairs,<br>Afloat & Voyage Repairs and Deslopping<br>& Demucking of Tankers.</p>

<p style="font-size: 18px;text-align:left">We attend Projects with priority to protect<br>and promote the commercial and<br>technical objectives of our Clients.</p>

With this code I have the image background and an image. The problem is when I resize the page (for example to fit in a tablet screen) the image of the ship breaks the letters!!!

I have attached a Screenshot to show what I mean.

How can I fix this? What sort of code must I put to make it right? Or is there another way to do it? I want an image background and an image!

Thank you in advance.

2

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it and test out some possible solutions for you?

Best Regards,
Support

3

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it and test out some possible solutions for you?

Best Regards,
Support

4

Hello,

I haven’t uploaded it yet, it runs on local server :slight_smile: Could you please provide with some solutions please?

Kind Regards,
Nikos

5

This is the site, I finally uploaded it:

Any help would be very much appreciated!

6

Hi,

Sorry for a late in response, can you recreate the same in your live website? http://safeportltd.com/

Let us know,

Thanks,
laranz.

7

Hi Iaranz,

What do you mean “if I can recreate the same in my live website”? If I have the same problem ? Yes, the problem still exists if you start resizing the page you will see what I mean.

You can read the first message I posted for more details and a picture that is attached. Someone from support sent me a reply to give him the link to my site so that he could investigate and test some possible solutions.

The problem is still there though.

Nikos

8

Hi,

Sorry for the misunderstanding,

Please don’t add inline style like that, please remove those and just asign class or ID in the HTML and then later style that in Appearance -> Customize -> Additional CSS or your child theme’s style.css. Please remove all inline styles and give the class and reply me back I will give you the proper CSS to set that correct on mobile/tablet devices.

OR

please follow this http://take.ms/2Do2N don’t add any HTML inside the content and also on the title. You can’t add both a background image and also a right side aligned image in the parallax widget. If you want you can get the ID of the parallax widget and assign a background image using CSS later.

Let us know,

Thanks,
laranz.

9

Hi,

Sorry for the late reply. Can you tell me the code and where shall I write it? I must have the background image and the image as shown in the first message’s attachment…

Thank you,
Nikos