Viewing Putting Long, Complex Articles into a Responsive Mobile Website

Putting Long, Complex Articles into a Responsive Mobile Website



User: Laurens B. 6 years ago
I’m trying to fit longer and more complex articles into the Mobile Text Wrap Widget for responsive display on handhelds. The articles I need to post to complete this project are complex and include many sub-headings, images and occasionally videos. I’ve been trying to master inserting properly formatted headings into the Widget as outlined below. I’m not getting the results I was hoping for. Here’s some of what I’ve been trying:

First I tried coding a CSS internal head code style on the page containing the Mobile Text Wrap Widget:

<style>
h1 {
    color: rgba(51, 0, 0, 1);
    text-align: center;
    font-family: “Malayalam MN”, Verdana, sans-serif;
    font-size: 18px;
}

h2 {
    color: rgba(51, 0, 0, 1);
    text-align: center;
    font-family: “Malayalam MN”, Verdana, sans-serif;
    font-size: 17px;
}

h3 {
    color: rgba(51, 0, 0, 1);
    text-align: center;
    font-family: “Malayalam MN”, Verdana, sans-serif;
    font-size: 16px;
}

p {
    color: rgba(51, 0, 0, 1);
    font-family: “Malayalam MN”, Verdana, sans-serif;
    font-size: 15px;
}
</style>


I placed this in the Page Settings Inspector, Head Code Box. It didn’t work. I also tried putting:
<head>
</head>
above <style> and below </style> without success.

========================================

Then I tried inserting an inline style (poorly). This example came up in the correct color, size and weight. Sadly, the font-family it came up in was Times and all the body text that followed was Times as well:

<h3 style="color:rgba(51, 0, 0, 1);text-align: center;font-family: “Malayalam MN”font-size: 16px;, Verdana, sans-serif;font-weight: normal;">This is an h3 heading, LM:GNC</h3>
_______________________________________

Oddly enough, when I corrected the broken syntax and re-inserted the code:

<h3 style="color:rgba(51, 0, 0, 1);text-align: center;font-family: “Malayalam MN”, Verdana, sans-serif;font-size: 16px;font-weight: normal;">This is an h3 heading, LM:GNC</h3>

It didn’t render a Heading at all and none of the body-text that followed this inline-style rendered either.
________________________________________

In truth, I’m relatively new at this. I’ve run out of ideas and could use a hand. How do I add headings in the style indicated above to the Mobile Text Wrap Widget?

Also, is there a way of coding additional images into the widget?

And finally, Is there a better way of putting together complex articles; headings, images and videos, that are responsive on mobile devices?
User: Roddy 6 years ago
The widget has a class name so you need to state the properties correctly...

<style>
.twrap h2, .twrap h3, .twrap h4{display:block;font:20px verdana;color:#000;text-align:center;margin:0;padding:5px 1% 0}
.twrap h3{font-size:18px}
.twrap h4{font-size:16px;color:#0000FF;text-align:left}
.twrap p{font:15px Verdana;color:#000;margin:0;padding:3px 1% 0;line-height:24px}
.clearfix {display:block;width:100%;overflow:auto}
</style>

Adding more headings text and images is complicated slightly by the floats which cause the text wrap. You need to also remember that the text box in the widget has a hidden opening <p> and closing </p>. That's why your HTML broke after you inserted a heading. You would need to do ...

</p>
<h2>Heading</h2>
<p>Next paragraph

Here's some additions with comments...

<section class="twrap" style="max-width:1000px">
<h1>h1 Heading</h1>
<p>
<!-- start of text in box 1 no opening <p> required -->
This is the first full width paragraph preceeded by the h1 heading. The heading is an h1 because it is the first one inside an HTML5 container. The rest of the headings are h4 paragraph headings.
<!-- end of text in box 1 --></p>
<a href="#" class="imgLink"><img src="image-1.jpg" alt="alt" style="float:left;width:50%;"></a>

<h4>h4 Paragraph Heading</h4>
<p><!-- start of wrap text in box 1 -->
Add paragraph text and then close it
</p>
<!-- add clearfix and h4 heading -->
<div class="clearfix"</div>
<h4>h4 Paragraph Heading</h4>
<!-- start of full width text -->
<p>
Full width text and its heading are preceeded by a clearfix to stop it floating up to the right of the image.
</p>
<!-- add clearfix and image -->
<div class="clearfix"</div>
<img src="image-2.jpg" alt="alt" style="float:right;width:40%">

<!-- add h4 and wrap text -->
<h4>h4 Paragraph Heading</h4>
<p>Wrap text for image 2. The image is preceeded by a clearfix and has an inline style to float it right and change its width

<!-- add clearfix and h4 heading -->
<div class="clearfix"</div>
<h4>h4 Paragraph Heading</h4>
<!-- start of full width text -->
<p>This is the last paragraph which does <u>NOT</u> require a closing tag

<!-- end of text in box 2 --></p>

</section>

Note the inline styles for image float direction and width.

Do NOT use <heaad> tags in the Head Code box!

Quote:
Also, is there a way of coding additional images into the widget?

It would be a lot easier to use one of the responsive column widgets. These would work for 2, 3 or 4 images..

To use text wrapped images, it would be much easier to create the item in a code editor and use one of the new Code Insertion widgets.

I'll try to find time to create a Code Snippet for this type of thing.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Laurens B. 6 years ago
Thanks Roddy, I've started working with your examples. I'll let you know if I have any more questions. -Larry
User: Laurens B. 6 years ago
I’ve been hammering things out in the Mobile Text Wrap Widget and have gotten the following working:

In the Head-Code-Box:

<style>
h2, h3, h4{display:block;font:20px Verdana,Helvetica,sans-serif;color:#330000;text-align:center;margin:0;padding:5px 1% 0;line-height:24px}
h3{font-size:19px;text-align:left;margin:0 0 0 12px;padding:5px 1% 0;line-height:24px}
h4{font-size:17px;text-align:left;margin:0 0 0 12px;padding:5px 1% 0;line-height:24px}
.twrap p{font:15px Verdana,Helvetica,sans-serif;color:#330000;margin:0;padding:3px 1% 0;line-height:24px}
.clearfix {display:block;width:100%;overflow:auto}
</style>

This allows me to place additional Headings and Text Into the Widget nicely.

In the second Text Box of the Widget I’ve put the following code for inserting the 2nd Image:

</p>
<div class="clearfix"</div>
<img src="ewExternalFiles/wanted-dead-and-alive-schrodingers-cat.jpg" alt="alt" style="float:right;width:40%">
<h4>h4 Paragraph Heading</h4>
<p>Wrap text for Image 2. The image is preceeded by a clearfix and has an inline style to float it right and change its width . . .

This is presently putting an “alt” place holder in the 2nd text box inside the Widget. I have tried a variety of pathings in order to place the 2nd Image in the text box of the Widget without success. When I preview or upload the page to an html server the image displays quite nicely.

Q: Is there a way of designating an Image from the Assets Section (or anywhere else) to appear inside the Widget instead of the placeholder?
User: Roddy 6 years ago
Select the image in the Assets List, right (control) click it and copy the relative file path.

Paste this into the code to replace this...

ewExternalFiles/wanted-dead-and-alive-schrodingers-cat.jpg

The URL should be like this...

{!-ASSETSPATH-!}Images/wanted-dead-and-alive-schrodingers-cat.jpg

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Laurens B. 6 years ago
<img src="{!-ASSETSPATH-!}Images/wanted-dead-and-alive-schrodingers-cat.jpg" alt="alt" style="float:right;width:40%">

Worked perfectly. Thanks Roddy
User: Roddy 6 years ago
I've made a widget which I will add to the Code widgets for creating the type of responsive page you require.

The DEMO shows the HTML for the various items so it's just a question of copying the ones required and pasting them into the code box in the required order. All the styles can be changed in the widget settings to save creating a stylesheet.

I has a built in footer with smooth scroll to the top so it adds jQuery. When I get time I'll do another demo showing how to insert other items like a slideshow or video.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Laurens B. 6 years ago
Thanks Roddy,

I'm looking forward to receiving the link to the Widget. I'm very excited about the upcoming Demo on inserting other items like a slideshow or video. I was just starting to hammer that out this morning. Having the Demo will streamline my efforts tremendously.

Larry


Post Reply
You must login or signup to post.