bootstrap website images not showing on mobile - image

Any reason for images not showing on mobile phones when using Bootstrap 3? (in the browser everything looks fine).
This is the temporary url: www.alweso.2ap.pl
None of the images on my website is visible on mobile, here's a piece of example code:
<div class="full">
<div id="page-2" class="container">
<div class="row flower-row">
<div class="col-md-6"><img src="images/stones.jpg" class="img-responsive" alt="flower"> </div>
<div class="col-md-6"><h1>Blablabla</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. Maecenas at bibendum nunc</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare porttitor diam, a accumsan justo laoreet suscipit. </li>
</ul>
</div>
<div class="clearfix visible-md"></div>
</div>
</div>
</div>

Related

Scrape paragraph with href inside

This is the html:
<p class="myParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel justo
<a href="http://google.it" class="small-link" target="_blank">
<span class="tco-ellipsis"></span>
<span class="invisible">https://</span>
<span class="js-display-url">google.it</span>
<span class="invisible">lpage/events/?ref=page_internal&mt_nav=0&locale2=it_IT</span>
<span class="tco-ellipsis">
<span class="invisible"> </span>…
</span>
</a> ornare, suscipit nisl eget, aliquam augue. Aenean quis pretium
</p>
If i use tree.xpath('//p/text()') it only returns me
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel justo
instead of
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel justo ornare, suscipit nisl eget, aliquam augue. Aenean quis pretium
I also tried tree.xpath('string(//p)') here
How can i take both complete paragraph and href? Not every time there's a a element inside paragraph
xpath('//p/text()') returns a list of strings. Join these strings to get the wanted result.
from lxml import html
doc = """<p class="myParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel justo
<a href="http://google.it" class="small-link" target="_blank">
<span class="tco-ellipsis"></span>
<span class="invisible">https://</span>
<span class="js-display-url">google.it</span>
<span class="invisible">lpage/events/?ref=page_internal&mt_nav=0&locale2=it_IT</span>
<span class="tco-ellipsis">
<span class="invisible"> </span>…
</span>
</a> ornare, suscipit nisl eget, aliquam augue. Aenean quis pretium
</p>"""
root = html.fromstring(doc)
print("".join([t for t in root.xpath("//p/text()")]))

Convert <img> to <img-amp>

I'm working on nodejs & mongodb.
When I place this code; <%- postContent %>, it renders into the following format:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<img title="Image Title" class="alignnone wp-image-9453 size-full" src="https://example.com/images/2017/03/image-name-1.jpg" alt="image alt here" width="847" height="507" srcset="https://example.com/images/2017/03/image-name-1.jpg 847w, https://example.com/images/2017/03/image-name-1-300x180.jpg 300w, https://example.com/images/2017/03/image-name-1-768x460.jpg 768w, https://example.com/images/2017/03/image-name-1-825x493.jpg 825w, https://example.com/images/2017/03/image-name-1-410x246.jpg 410w, https://example.com/images/2017/03/image-name-1-150x90.jpg 150w" sizes="(max-width: 847px) 100vw, 847px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
Now, my query is; how to I convert <img> into <amp-img>?
There is no way to convert. You have to replace the img elements with amp-img elements.
And you have to use amp-img attributes src and layout, width and height with respect to layout.

Add title to readmore button in tagged articles using joomla

I'm new to joomla and I have a problem in adding title of articles in read more button using TAG ITEMS.
I have two articles like this:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis elit augue. Aliquam mattis sem sed ligula mattis faucibus. Donec vitae pretium sem. Vivamus ipsum enim...
Read More
Dolor Sit amet
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas purus ex, ultrices eget ante ac, tempor suscipit nunc. Etiam viverra dolor id...
Read More
=========================================================================
What i want to do is add the title of each article to the readmore button, so it would look like this:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis elit augue. Aliquam mattis sem sed ligula mattis faucibus. Donec vitae pretium sem. Vivamus ipsum enim...
Read More: Lorem Ipsum
Dolor sit amet
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas purus ex, ultrices eget ante ac, tempor suscipit nunc. Etiam viverra dolor id...
Read More: Dolor sit amet
Can anyone help me with this problem?
Thanks!
In Content -> Articles -> Options, set "Show Title with Read More" = "Show".

My bootstrap image keeps cutting into my paragraph in mobile

I am trying to get an image to pull-right and display block when in mobile, but my image keeps cutting into my text. Can anybody help me figure out how to make the image appear on top, then the text?
Here is the link: http://o-pd.com/AP
<div class="clearfix">
<img src="http://o-pd.com/AP/img/John-Abraham.jpg" alt="John Abraham" class="pull-right img-responsive gap-left" width="200" height="200">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia pharetra lacus, id pulvinar ligula molestie et. Duis in ultricies ipsum. Etiam tellus diam, eleifend in rutrum ac, facilisis quis dolor. Nulla ex elit, malesuada vel commodo ac, volutpat nec odio. Duis ac turpis dignissim, placerat lectus quis, venenatis dui.</p>
<br/><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia pharetra lacus, id pulvinar ligula molestie et. Duis in ultricies ipsum. Etiam tellus diam, eleifend in rutrum ac, facilisis quis dolor. Nulla ex elit, malesuada vel commodo ac, volutpat nec odio. Duis ac turpis dignissim, placerat lectus quis, venenatis dui.</p>
</div>
/*we will use media query to change the direction of img*/
#media (max-width:500px){
.pull-right{
float:left !important;
}
p{
clear:both;
}
}

Saving data with CreatePHP in Laravel 4

I'm trying to implement https://github.com/flack/createphp with Laravel 4.
I have have a view which outputs some data from the database:
<div class="row editable content" property="sioc:content" data-placeholder="Enter some content..." contenteditable="true" data-medium-element="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper bibendum tellus at commodo. Nam fermentum odio posuere nulla gravida, quis placerat augue sodales. Vivamus sagittis, ligula eget eleifend congue, nibh erat fermentum neque, a consectetur dui libero imperdiet elit.
I am not sure how to use https://github.com/flack/createphp with Laravel to then save the data once the orgional data has been updated. Like in http://createjs.org/demo/hallo/
I have added midgard/createphp": "0.9.*#dev in composer.json
Can anybody point me in the right direction?
Cheers,
Chris

Resources