No text next to image on mobile

[tobi]

Hi,

I’m fairly new with WordPress and website building.

I made my first WordPress website with the Weaver xtreme theme.

On displaying this site on my mobile there are bits of text next to the image. Is there a way to change this. So all text is displayed as one paragraph below the image.

Link to image

[scrambler]

Please always give us a link to the actual page so we can be sure by inspecting the site.

I believe what you are seeing is the text wrapping around the image, which on a narrow screen does not look great.

If you always want the image above the text and the text below, you can use the center option for the featured image in Main Options > Post Specific > Featured image.

If you only want that to happen on phone, read Item #2 of the tutorial below

http://forum.weavertheme.com/discussion/10739/weaver-xtreme-tips-and-tutorials-part-4

[tobi]

Hi Scrambler thx for your answer.

I tried it with the “my-image-clear “in the image class. But without result.

http://huisje-callantsoog.nl/test2/het-huisje/.

Also is there a better way to make room below the text. to start a new section so the text starts below an image on a desktop.
Now I used    but they are removed.

[Weaver]

You can force the FI to be all by itself by selecting the “Center” alignment for the FI on a page or post. Note there are separate FI settings for Page, blog full, blog excerpt, and post single page view.

[scrambler]

1- I don’t see any image with the class my-image-clear

If you have put it on one, be specific about which one. If you had removed it, put it back.

BUT there was a space missing in the rule of the tutorial between the is-phone class and the my-image-clear class

.is-phone img .my-img-clear {display:block !important;float:none !important;margin-left:auto !important;margin-right:auto !important;}

Note: In case you dont know, when you insert an image with the Add media button, if you do not want text to flow around it, just select Align > None that will make the text following the image drop under the image

2- If you want to create extra space between content, use inline style margin on the html tag.

Switch the content editor to TEXT mode, and use things like below

example for a paragraph

<p style=”margin-top:20px;”>your text</p>

if you do HTML editing in text mode, you may need to check the option Allow Raw HTML and Script in the page or post editing page options to prevent WP from auto formatting your code

[tobi]

the first 3 images on the page have the class my-image-clear

<h3 class=”groot” style=”text-align: left;”>De Woning:</h3>
[caption id="attachment_34" align="alignleft" width="230"]<img class=”my-img-clear; size-full wp-image-34″ src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida3.jpg” alt=”Het terras” width=”230″ height=”153″ /> Het terras[/caption]

[caption id="attachment_33" align="alignleft" width="233"]<img class=”my-img-clear; size-full wp-image-33″ src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida2.jpg” alt=”De tuin” width=”233″ height=”155″ /> De tuin[/caption]

[caption id="attachment_32" align="alignleft" width="230"]<img class=”my-img-clear; wp-image-32 size-full” src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida1.jpg” alt=”Het huisje” width=”230″ height=”153″ /> Het huisje[/caption]

The p style for margin is working, thx

[Gillian]

There shouldn’t be a semi-colon after the my-img-clear class as highlighted below – remove them.

<h3 class=”groot” style=”text-align: left;”>De Woning:</h3>

[caption id="attachment_34" align="alignleft" width="230"]<img class=”my-img-clear; size-full wp-image-34″ src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida3.jpg&#8221; alt=”Het terras” width=”230″ height=”153″ /> Het terras[/caption]

[caption id="attachment_33" align="alignleft" width="233"]<img class=”my-img-clear; size-full wp-image-33″ src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida2.jpg&#8221; alt=”De tuin” width=”233″ height=”155″ /> De tuin[/caption]

[caption id="attachment_32" align="alignleft" width="230"]<img class=”my-img-clear; wp-image-32 size-full” src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida1.jpg&#8221; alt=”Het huisje” width=”230″ height=”153″ /> Het huisje[/caption]

[scrambler]

As Gillian said, classes in the img tag class attribute must be separated by a space NOT a semi colon

You also messed up the rule by adding img. The my-img-clear class is on the img tag, so if you would be to add that selector it should be attached to the class (no space), but you don’t need it.

You have

.is-phone img .my-img-clear {display:block !important;float:none !important;margin-left:auto !important;margin-right:auto !important;}

it should be

.is-phone .my-img-clear {display:block !important;float:none !important;margin-left:auto !important;margin-right:auto !important;}

[tobi]

I changed the img class on the images:

<h3 class=”groot” style=”text-align: left;”>De Woning:</h3>
[caption id="attachment_34" align="alignleft" width="230"]<img class=”my-img-clear size-full wp-image-34″ src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida3.jpg” alt=”Het terras” width=”230″ height=”153″ /> Het terras[/caption]

[caption id="attachment_33" align="alignleft" width="233"]<img class=”my-img-clear size-full wp-image-33″ src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida2.jpg” alt=”De tuin” width=”233″ height=”155″ /> De tuin[/caption]

[caption id="attachment_32" align="alignleft" width="230"]<img class=”my-img-clear wp-image-32 size-full” src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida1.jpg” alt=”Het huisje” width=”230″ height=”153″ /> Het huisje[/caption]

also changed the rule on main options,Fonts & Custom,Custom CSS rules to:  

.is-phone .my-img-clear {display:block !important;float:none !important;margin-left:auto !important;margin-right:auto !important;}

But it’s still not working. 

I did the change of the CSS rule according to the tutorial you mentioned in your 1st answer:

If you want to generalize that behavior to other images inside regular content, you can do the following:

Give all images that you want the behavior for a common class. To do that, you would switch your editor to text mode then, in the img tag, if it already has a class attribute , just add the class   my-img-clear to the classes already in the class attribute, separated by a space.

For example if you has an image tag that says

<img  class=”class1 class2″…../>

Make it

<img class=”my-img-clear class1 class2″…./>

do that for every image that wou want the behavior for.

Then change the rule described above to

.is-phone img .my-img-clear {display:block !important;float:none !important;margin-left:auto !important;margin-right:auto !important;}

[scrambler]

Well we are almost there, but the problem is because you are using caption.

When using caption, WordPress puts the image in a floated div container and our change need to be applied to the caption container, not the image.

When inserting an image with caption, wordpress uses a caption shortcode, you need to add a class attribute with the class there instead of the image.

Right now your image HTML will look like’

[caption id="attachment_34" align="alignleft" width="230"]<img class=”my-img-clear size-full wp-image-34″ src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida3.jpg” alt=”Het terras” width=”230″ height=”153″ /> Het terras[/caption]

change it (in yellow) to

[caption id="attachment_34" align="alignleft" width="230" class="my-img-clear"]<img class=”size-full wp-image-34″ src=”http://huisje-callantsoog.nl/test2/wp-content/uploads/2015/10/casa_pura_vida3.jpg” alt=”Het terras” width=”230″ height=”153″ /> Het terras[/caption]

I will update the tutorial

[tobi]

thank you crambler,

It works right now.

Is it a good way to use caption for the images, or is there a better way to do this?

Whats rests now is that I have extra spaces on a mobile device from the margins I used, to get the text alligned under the images.

[scrambler]

This is the easiest way to do caption.

For the margin, I am not 100% sure why you are using that 240px margin, but I suspect what you actually want to use is a clear:left

Instead of

<p style=”margin-top:240px;”>….

try

<p style=”clear:left;”>….

and see if that does what you want. If not try to explain exactly what the purpose is there.

[scrambler]

Also, you may want to activate the clear on small tablet too and not just phones.

You can do that by changing is-phone by is-mobile in the rule below

.is-mobile .my-img-clear {display:block !important;float:none !important;margin-left:auto !important;margin-right:auto !important;}

[tobi]

great!!!! I learned a lot this week.

this clear does the trick

can I ask another question, or do I have to open a new topic for that?

On page huurprijzen I created a table.

But the table cannot be used for scaling to a mobile. Is there another way to do this table? 

[scrambler]

There are some things you can do to make table responsive to a certain point.

It happens that your can as the content can be scaled down quite a bit.

Read the thread below to understand the global concept and potential solutions.

http://forum.weavertheme.com/discussion/8616/tables-versus-divs-how-to-style-tables-in-weaver

In your case you just need to replace the fixed width attribute by an inline css of either width:100%, or max-width:700px

<table style=”max-width:700px;”>

This will allow your table to scale until it hit uncompressible text in columns

[tobi]

Thx again scrambler. This works

[Author]

Posts