Best practice for Text with right floating image?

Macjoomla
Topic Author
Offline
Premium Member

9 years 1 month ago #53323 by Macjoomla

Replied by Macjoomla on topic Best practice for Text with right floating image?

Hello Micker,

thank you, that works and is exactly what i was looking for 8-)

Just one thing, after this is working now, i thought, it would be easy to increase the distance between floating text and the image, but "margin", "border", "padding" did not work for me. Do you have an additional hint to increase the distance left from the image?

My custom css now reads:

Code:

span.flexi.value, .flexi.value {
    display: block;
    float: none;
    max-width: 100% !important;
    padding: 0 !important;
}
.field_hammfoto {
	float: right !important;
}

Thank you and best regards, Macjoomla

Please Log in or Create an account to join the conversation.

Rooney
Offline
Moderator

9 years 1 month ago #53325 by Rooney

Replied by Rooney on topic Best practice for Text with right floating image?

Hi, you have many !important statements in your css:

Code:

#flexicontent .flexi.value, .flexi.value {
    margin: 2px 0 !important;
    padding: 0 !important;
}
span.flexi.value, .flexi.value {
    display: block;
    float: none;
    max-width: 100% !important;
    padding: 0 !important;
}
span.flexi.value, .flexi.value {
    display: block;
    float: left;
    max-width: 100% !important;
    padding: 0 !important;
}
#flexicontent .flexi.value, .flexi.value {
    margin: 2px 0 !important;
    padding: 0 !important;
}
.field_hammfoto {
    float: right !important;
}

You should ONLY use !important if absolutely necessary or during site development. In your example you can see that many padding: 0 are important. Why? Get rid of all the important and change the paddings.

Rooney

Joomla! 3.9.24 and FC 3.3.9

Please Log in or Create an account to join the conversation.

Macjoomla
Topic Author
Offline
Premium Member

9 years 1 month ago #53326 by Macjoomla

Replied by Macjoomla on topic Best practice for Text with right floating image?

Hello Rooney, you may be right, but these importants have already been there from flexicontent, so i would not dear to eliminate them because this could cause any other layout issues.

I was just adding the last important of your list to let my image float left. without important it does not work.

Thank you and best regards, Macjoomla

Rooney wrote: Hi, you have many !important statements in your css:
…
You should ONLY use !important if absolutely necessary or during site development. In your example you can see that many padding: 0 are important. Why? Get rid of all the important and change the paddings

Please Log in or Create an account to join the conversation.

Macjoomla
Topic Author
Offline
Premium Member

9 years 1 month ago #53327 by Macjoomla

Replied by Macjoomla on topic Best practice for Text with right floating image?

Finally i was adding following code to same "item.css":

Code:

.fc_field_image {
	margin-left: 10px;
	margin-bottom: 10px;
}

And now it seems to work as expected. Thank you guys for your hints and help 8-)

Best regards, Macjoomla

Please Log in or Create an account to join the conversation.

Macjoomla
Topic Author
Offline
Premium Member

9 years 1 month ago - 9 years 1 month ago #53345 by Macjoomla

Replied by Macjoomla on topic Best practice for Text with right floating image?

Unfortunately this was not the complete solution for my question. As soon as i add following code to the item.css:

Code:

span.span.flexi.value, .flexi.value {
	float: none;
}

not only the image is going to float right as i was expecting, but it is changing the appearance of the fields "created" and so on in the box above the article, the creation date suddenly goes in two lines, where before one line was enough.

Thank you for your help and best regards, Macjoomla

Last edit: 9 years 1 month ago by Macjoomla.

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

9 years 1 month ago #53346 by ggppdk

Replied by ggppdk on topic Best practice for Text with right floating image?

Hello

you can always duplicate the template

and modify the HTML inside the item(_html5).php

-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.