At the moment I'm trying to make a responsive slider with text on the left and an image on the right.
On smaller screen, the image should move above the text (see below).
I have already tried this on a few occasions (for example with a grid or two images), but it did not work.
Mobile:
Desktop:
(Image source for the example: https://guten-tag.cmsmasters.net/)
Update
Hi, thanks again for your feedback, and correct, some code I should have actually mentioned. Nevertheless, I have found a solution to the question here. Thanks for your time anyway ;D
Related
Hi I would like my background image to wrap up the content/text inside it. The text seems to overflow from the background image and overlaps other text. It all works well on desktop but when I try to open Codepen in my iPhone, it didnt turn out as how it is expected to be. Please refer to pictures I attach here.
`https://codepen.io/sharonloh/full/pBrdRd`
I am new to coding and I have tried various ways after trying to search for solution but nothing seems to work.
Text overflowing from background image
From the picture you posted, there are various potential resolutions.
The first potential issue is that you have set a background image but not set other background attributes.
One way to resolve your issue would be to add a repeat to your css:
background-image: (your image);
background-repeat: repeat;
Add this to your css for the image/background class. If you only want the image to repeat vertically, you can use repeat-y instead of repeat. Similar for horizontal/repeat-x. Another way would be to use background-size:cover.
If you only want it to repeat on smaller screens you can add a media-query and add the extra attribute there.
Do add your css/html in future (now would be preferable! You can edit your question to add code). It helps to give a clearer picture of how to resolve the problem.
Hope this helps
I'm just using a small bootstrap carousel on a site, but it's acting a little oddly. The first image displays at the correct size but each subsequent one appears half-sized, centred at the top of the container for around half a second before resizing properly. Having reached a frustration point I'm hoping someone can point me in the right direction as to why it might be behaving like this.
Easy way you can handle
This just apply one commen class for images
Then apply CSS
Specify height and width
Definitely your problem get solved..
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!
Regarding flexslider
Is there any way to modify it from displaying images to displaying only text? Or is flexslider only for animating images? If so, can you give me a hint what would have to be changed?
Thank You
For each slide in the slideshow I would like to display varying amounts of text only. And I would like to reliably keep the slider controls responsive and in a standard position on the screen as each slide changes. I am not really concerned with displaying the images.
In some of the li examples which can be found in the zippy-share link below, I associate an image file with the "flex-caption" CSS Selector found in flexslider.css file. Using an associated image file for each text paragraph seemed like my best bet to force the slider controls to stay in that standard position as each slide changed. Am I on the right track?
I am not really concerned with displaying image files.
An html version of this problem can be found at the zippy-share link below:
http://www51.zippyshare.com/v/46072947/file.html
take a look at the li examples in the main index.html
You can replace the image with the text you want to put. Please remember to modify the minItem and maxItem to fit your need.
I've noticed that recently sites began to keep images in one big image.
For example google.com
We see a lot of little images on left side. But really is one image:
How these images are cut and shown? (firebug says that it's just element with width and height, but where X and Y position is pointed and how?)
Thanks for reply
with css background the image is moved to the right position. the other part of the image is not shown, because the element with the image as background is exactly as big as the wanted picture part.
try changing the px values in the css in the background part. you should see the image moving
<span style="background-position:-20px -132px" class="micon"></span>
here you see the background-position which is used for this image
This technology is called CSS Sprite. To reduce the http connections number needed to load multiple images. Usually this is done by designer.
This is called "CSS Sprites".
There are a lot of informations on Internet about that. In random order :
Smashing Magazine
CSS Tricks
A List Apart
And many more ...