Using the module News Show Pro GK5 in Joomla 3, I did the following setup:
Amount of columns 1, amount of rows 1.
Image: float left,
Header: float right,
Text: float right
The image is set to responsive, wrap content and image auto-scale on.
The content appears as it should: the image on the left and the title and text next to it, on the right. Un fortunatelly, when the browser is resized to a smaller size, the title and text shrinks keeping its position to the right. I would like the title and text to move bellow the image when the browser width is small enough.
Any ideas to get this responsive behaviour on News Show Pro GK5?
To responsive News Show Pro GK4/5, you can overide your code, some things must be change:
img {
max-width:100%}
Change from style="width:50%;" to style="width:300px;"
Related
I have a hyperlink in the figure caption on my project and the link only appears to work when in mobile view / or small screen where the columns collapse. For some reason, this issue isn't replicated on JFiddle but it is when I test on a variety of browsers and devices.
I discovered that with my old code, the paragraph's area was overlapping the hyperlink's hoverable clicking space, and making it impossible to click until the image would stack above on smaller screen/mobile in the old code.
**Old HTML** JFiddle: https://jsfiddle.net/LybeppL3/7/
**So I tired a workaround**: see Current Code: https://jsfiddle.net/5c2sm9s1/1/
OR # PreemPrice.com
Specifically, I am trying now to break up a column for the picture on the right, the paragraphs of text to it's left, and when on mobile, that the picture stacks above the paragraphs of text and is centered.
However, my workaround does not look as nice/ not as responsive on mobile as my old code.
Specifically, I miss how in the "old" code, see JFiddle, it is really responsive in that the image keeps the same size, and once it's too big, it collapses over the text. In my current work-around, the photo shrinks uglily, and then stacks below instead of above the paragraphs.
Also, I miss how the image is fully centered at the top in mobile device in the old code.
I would appreciate help in getting this to work properly! Thanks!
My friend has a blogspot blog. On my computer, everything looks good but the three columns she uses become smaller on hers like this:
That's mine.
And that's hers.
On the left there's an image as background and the other two is the main section where the posts are and a sidebar on the right side.
And I found these text in the middle of the code:
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit. This results in a
margin-width's worth of pixels being cropped. If the user is not using
shrink to fit then we expand the header.
I'm not very great in these things so I have no idea what should I do. Any guesses?
I'm in need of a sliding gallery that spans the width of the page but darks out the other images but highlights the one in the middle on show. Hopefully I explained it enough. I can do a full width slider but I need a full width gallery slider. Thumbnails not so important.
No longer using this. using other methords that seem to work for now.
Thanks anyway
I'm doing my online portfolio website and I have a responsive problem (i always have responsive problems, hate this thing).
This is what I want my website to look like in all of screens resolutions:
https://s3.amazonaws.com/f.cl.ly/items/0W3k3Y0C3L2O2m2J2P1I/resolution2.jpg
The problem is, as you may know, when I code this in html even with Bootstrap, the the big text (designer, no matter what) covers me in the right, depending on the screen size.
How can I "fix" the text in the image so that no matter the screen size the text always stays in the same place of the image?
<img> tags do not have an option to add text on it.
You can use images as background and add text. You can use <div> tags to server this purpose. Something like below:
<div class="imageContainer">Some Text</div>
use the css background-image property to show the image
.imageContainer {
background-image: url(locationoftheimage);
}
For smaller area's you can just make the image as link, if you want. For example your menu has links such as Home, About etc.
Make a small image like this
Code would be like this:
<img src ="url_of_Image">
I got a page which has a background image and some floating images over that. These images are linked to the background image that is why i want to show the floating image on the exact point on background (Will be cleared in screenshot below).
Screenshot
As you can see in above image image named religion is above a temple in background image and so the people and safari but the mail problem is expedition image which on resolution change floats to left and replaced from the top of the mountain peak in background image.
Please help me to get this working on all resolution.
Demo Link
It looks like the expedition image is changing its position in relation to the actual page instead of the background image like all of the other images are. You could try putting all of the images inside a div, so when the page resizes it changes the size of the div (if you are using %'s to define the dimensions of the div). This might keep all of the images placed where you want them to stay.