XF 1.4 HTML Style Question

TheSalt · Mar 11, 2015

Hello Gang,

I have a HTML question. I did this little layout for an "about us page" I think I have it to where I want it but I noticed a small issue with how it looks on my phone. I'm floating the image but at the reduced size of mobile the text drop a line below the image. Is there a way to keep the text contained and still float the image using just HTML? Below is the code and a few a images of what is happening on my mobile browsers. I'm very new to coding.

Many thanks!
Nick

https://www.reefpeeps.com/aboutus/

Code:

<div class="aboutus_welcome"; style="padding: 20px">

<p>
<body>
<center><img src="https://www.reefpeeps.com/images_about_us/about_us_142x51.png"/></center>

<font size="3">
<font color= "white">
<p align="justify">

<img src="https://www.reefpeeps.com/images_about_us/clownfish.jpg" style="float:left; margin:-6px 20px 30px 0; border:1px solid #94fef3; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);" />

We are an online community of reef keepers that are dedicated to creating and maintaining a peaceful environment; a place where reefers of all skill levels are respected and can comfortably ask questions and share their marine aquarium experiences.
<br>
<br>
We strive to inject marine conservation into the dialog here at Reef Peeps. With so much of the common knowledge and issues our oceans face unknown to most of the public, reef keepers make a great audience of teachers.
<br>
<br>
As a reefer that maintains a marine aquarium, you will find people asking you lots of questions. We believe this makes you an Ambassador to the Ocean. You can be a great source of knowledge that can open eyes to a lot of the issues our oceans face. This is why we feel marine aquariums and conservation couple well.
<br>
<br>
Our ultimate goal is to help people cultivate a healthy environment for their creatures to thrive in while making them aware of the oceans needs. We hope that you will come<a href="http://www.reefpeeps.com/login/" style="color:#ffce2f; "><strong><b><em><i> join </i></em></b></a>our community today!
<br>
<br>
</p>
</font></body></div>

EQnoble · Mar 11, 2015

I just took a look, and to be honest....you should fix the overall responsiveness of your site before doing anything else (notice the scrollbar at the bottom in my image)...

It looks like you have the default xf responsive settings disabled so the minimum browser width you are showing is 976px.

..also what you show there in the images is not what I see when viewing your site, are you showing a different style in your images than are available publicly?

Anyways, I like the image there...gotta love a nice clown showing it's hosting skills

TheSalt · Mar 11, 2015

Thank you @EQnoble.

I believe I turned off the responsive design for a reason. It's been a while but I think it was because I'm using a portal for the home page and is was an issue for mobile. If I remember correctly, if left on the left, center and right column/sidebar are rendered in one consecutive column, so you have to scroll all the way down the page just to see the right sidebar (mobile only).

The images I used in my above post where taken on my phone not my desktop browser. Also there is only one style being used. The picture you uploaded in you post looks correct to me. I'm not noticing any difference in image styles. As for the "minimum browser width" do you feel people view webpages smaller than the 976px on a desktop browser normally? It never crossed my mine.

Here is an image of the about us page on my desktop browser (firefox). I would like the text to stay right of the image regardless to the window size like you see below. Thanks for your notes!

Screen Shot 2015-03-11 at 3.34.13 PM.webp

XF 1.4 HTML Style Question

TheSalt

Active member

EQnoble

Well-known member

TheSalt

Active member

Similar threads

We value your privacy