I have the Owl Carousel set up and it works great, but I have text over the image that doesn't resize in response to the viewport change. The images resizes, but the text remains the same.
How can I make the text (within p and div tags) to be responsive with the images?
I have the same problem...I found a free theme where text is responsive with this plugin but still I don't understand what is the code to fix it...hope this can help someone
here the link of the theme:
http://w3layouts.com/demos/umbrella/web/#
look at "testimonials" section
Regards
add this bottom: 30% !important; inside the CSS at the only screen and (max-width: 767px) section, for the owl caption label.
Related
i put iframe of Bandcamp embeded player on my website, but the background-image of my track look blurry.
i made this cover in Illustrator in 2400x2400 and i exported in Png24.. When i look the background image in Bandcamp the image seems in good quality.. i dont understand what to do to view the cover in my website in good quality.
you can see it in https://mauditemachine.com/
i tried to see what happened if i change the background-image to 1 instead of 8
<div id="art" class="item" style="background-image: url("https://f4.bcbits.com/img/a2126636077_8.jpg");"></div>
i see a better quality but i cant force it..
when i tried to change the size to 400x400 in the iframe code i have better results but i want to have 300x300 sizing.
i just change iframe parameters to select 100% for width and height.
In my Css i put width and height to 400px to a container above and for responsive design i put 300px
I've build a simple web page which includes a background image in the body tag and the background-size is set to cover in css file.When i resize my chrome window the original image gets displayed adjacent to same image and so on just like a collage.How can i solve this issue?
Add following CSS code to your stylesheet
background-repeat: no-repeat;
I know it is possible for labels to automatically break lines when in a panel.
Is there a way to have labels break lines when the text would be over a layouts width?
UPDATE
OK i tried it with "800px" width now instead of "100%" and now the labels are having line breaks. Whats the reason for this behaviour? And how can I workaround this then for a percentual sizing of layouts as this is important for my page?
It currently looks like in the image below, the text is just cut off.
Extracted Code showing the setup:
VerticalLayout labelLayout= new VerticalLayout();
labelLayout.setWidth("100%");
labelLayout.addComponent(usernameLabel);
labelLayout.addComponent(postLabel);
labelLayout.addComponent(ratioLabel);
labelLayout.addComponent(lowestRatedPost);
labelLayout.addComponent(highestRatedPost);
detailsLayer.addComponent(labelLayout);
wrappercontent.addComponent(detailsLayer);
wrapper.addComponent(wrappercontent);
I had exactly this problem, and managed to solve it using this CSS. Vaadin Labels have the CSS attribure white-space: nowrap which is what is stoping your text wrapping as you expect it to.
.v-label
{
white-space: normal;
}
I'm building a gallery page using Fancybox2 in Dreamweaver and I need to completely remove the padding between thumbnails. Please see my test site here
http://www.creativeclout.co.uk/our_work2.html
I can't see an option in the css anywhere.
Can anyone help please?
Thanks
you have no css padding. problem your images. http://www.creativeclout.co.uk/images/thumbs/ourwork_12.jpg
crop white area in images.
img {
vertical-align: bottom;
}
I am looking of a good example for dynamic 3 columns layout like this one from Google Search. I have see, that if the layout fits to every browser resulution. That menas, there is never a scroller if the resulution is 800, 1024 or >1024 . What kind of solution, can I use to become such effect? I have see, that the center content is floating, but how is it possible to fit for every resolution and is there a minimum of the width of the center, because if the browser goes smaller and smaller, there is a point, where the scroller is coming.
It will be great if anyone can redirects me to an similar example, please! I am interested in centered design, not left oriented like Google!
There is one CSS feature..
Here it is Google HTML5 site, where included this feature... Just try to change width of browser and scrollbar will not appear.. because css file has styles like
#media only screen and (min-width: 641px) and (max-width: 800px) { /* styles */ }
i.e. for some resolution you have some other styles..
take a look they css
Have a look at the CSS float tutorial, which I refer to every time I want to do a multicolumn. http://css.maxdesign.com.au/floatutorial/