As I have google this and getting many answers, but only for resize the font size, what my need is to resize/increase-decrease length of string as per the screen size.
I am creating hybrid application with multiple pages using dynamic text and want to set that text into div for fix length of device and if text length is greater than the height of device create new div as a new page.
<!-- for eg. Device Height 480px -->
<div class="page">
test text and the
text that is store
here with full length
of the div and device
is no longer to adjust
</div>
<div class="page"> <!-- This become another page of application -->
all this string.
</div>
<!-- Device Height 640px -->
<div class="page">
test text and the
text that is store
here with full length
of the div and device
is no longer to adjust
all this string.
</div>
Currently, I am working with images as a page into div and set it with full width and auto height into center of screen. But actually, i need to set dynamic text into that div. So I need any suggestion which is helpful to me.
<!-- Working - With an image -->
<div class="page">
<img src="images/page1">
</div>
<div class="page">
<img src="images/page2">
</div>
You can use wiewport with typography or anything...
body {
font-size: 1vw;
}
img {
width:99vw;
}
Link: https://css-tricks.com/viewport-sized-typography/
Related
The layout of my simple website is that there are 3 sections below each other with different background and every section have it's own textual content. I want to achieve so called 3D perspective effect, that the content text will throw shadow over the background section and when scrolling, the text will scroll a little bit faster than background.
Now there are thow ways of organizing the code:
First - every section (with background) have it's own content:
<main>
<section class="background-1">
<div class="content-1">Some text and image</div>
</section>
<section class="background-2">
<div class="content-2">Some text and image</div>
</section>
<section class="background-3">
<div class="content-3">Some text and image</div>
</section>
</main>
Second - sections (serving as a background) and text contents (hovering over background) are separated:
<div class="backgrounds">
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
</div>
<main class="contents">
<section class="content-1">Some text and image</section>
<section class="content-2">Some text and image</section>
<section class="content-3">Some text and image</section>
</main>
The difference is, that in first case, we must animate let's say top property of every content separately and in second case only the .contents wrapper need to be animated.
What is more preferred way, especially considering mobile device performance, then SEO and other stuff?
I'm trying to make the div not expand over user visibility, but when I dock multiple items in this div, it expands off screen.
Here is an example.
I know, it sounds long, but I was trying to reproduce the entire layout to find the problem.
<body>
<div class="container">
<div class="head"></div>
<div class="main">
<div class="painel"></div>
<div class="dash">
<div class="head-dash"></div>
<div class="content-dash">
<div class="email-list">
<div class="head-content"></div>
<div class="content">
<div class="item"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/ricardosc12/rb2kjtfh/12/
change the variable quant -> 50 and you will see the problem
Probably its height setting to 100% ignores its adjacent element, but how can I make it take up the remaining space without expanding later.
As you can see in the example, the email-list class has expanded over content, pushing all the main ones down.
I'm looking for a solution to this using flex, but can you suggest other possibilities.
I looked around but it didn't work.
Make a div fill the height of the remaining screen space
It's not the perfect answer but will solve your problem.
change your height of content-dash to this
.content-dash{
height: calc(100vh - 140px) ;
padding: 25px;
background: #EEEEEE;
}
We will make the content-dash's height to 100vh and subtract the height of head-dash and head from it.
So,
I have a project using React & tailwindCSS, and I'm building a platform using a custom CMS. The problem that I'm facing is the following:
Im showing different screen size options on the CMS and you can press on different screen sizes to view your content in lets say on a mobile screen.
Since the CMS editor is not in an iframe changing the width of the parent element to 1300px or 400px is not causing the elements inside to change to tailwinds responsive design, since the viewport is still the exact same on the DOM.
Now I've read about CSS container queries, but since I'm using tailwindCSS it would be rather painful to start editing that. Is there any way to manipulate the DOM within and tell to the editor div.element that its viewport is only ex. 1400px.
And yes, iframe would be a viable option.
Thanks in advance!
.screen--desktop {
max-width: 1440px;
width: 100%;
}
.screen--mobile {
max-width: 360px;
width: 100%;
}
<html>
<body>
<div class="container">
<!-- PAGE CONTENT wv is 100 -->
<div class="editor screen--desktop">
<!-- FRAMED CONTENT wv needs to be 50 -->
<div class="container">
<!-- Container #media max width needs to listen to the parent div's width only -->
<!-- Here would be element1 -->
</div>
</div>
</div>
</body>
</html>
So I have an episerver block for form. On desktop and large screens, the form is displayed with an image to its right. On smaller screens the image is hidden.
When the image is hidden, I would like to make the form wider to fill up the missing space. The image does not have its own div class. It is the background image of the containing div.
<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(#Url.ContentUrl(Model.CurrentBlock.Image))">
<div class="row">
<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(#Url.ContentUrl(Model.CurrentBlock.Image))">
<div class="row">
<div class="#(!ContentReference.IsNullOrEmpty(Model.CurrentBlock.Image) ? "col-sm-7 col-md-8" : "col-sm-12 col-md-12")">
<div class="whitepaper">
</div>
</div>
</div>
</div>
</div>
</div>
I have also modified the above so that when a form is not included in the page through the EPIserver editor that the row should be full width by default.
My css for .gatedbg
#media (max-width: 960px) {
.gatedbg {
background-image: none !important;
}
}
Is there a method either in EPIserver or ASP.Net/MVC to detect when the background image is hidden from view in the browser?
If I understood correctly, I cannot use javascript in this razor page because it is server side code?
These pb-5 pt-3 classes presumably are part of some grid system, that is responsible for the column widths? Do the 960px correspond to one of the responsive breakpoints used by that system?
If so, you probably just need to set different classes (that make the form take full width, and hide the “image” column completely);
otherwise you might need to overwrite the width coming from those classes explicitly in your stylesheet.
Hey I'm looking for some help - I'm more of a designer than a coder but I am trying to learn :)
I do have this kinda working but I can't figure out how to get the thumbnail image to resize to the height of the expanded div - as it expands.
I have a container div and inside that div I have multiple "expandable" divs which contain information about different products.
Each of these expandable divs has a title, a thumbnail image and a price of the product (as well as a plus sign image to expand the div itself).
When the div is expanded there is some more information about the product on show.
But when the div is expanded, I would also like the "price" to disappear (as it's now visible in the expanded information) and I would like the image to automatically scale to the height of the expanded div.
So the product information will be on the on the left hand side of the div and the image will be taking up the right half of the div (with the minus button on top of it.
This is my html
<div class="expandingContentContainer">
<div class="expandingContent">
<div id="expandingContentHeader" style="display:inline; float:left">
<h4>Portable navigation system</h4>
</div>
<div id="expandingContentThumb" style="display:inline;">
<img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
</div>
<div id="expandingContentPrice" style="display:inline;">
<img src="images/assets/icon_pound.png" />Price: £200
</div>
<div id="expanderSign">
<img src="images/assets/icon_plus.png" />
</div>
<div id="expanderContent" style="display:none">
<p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
<p><img src="images/assets/icon_pound.png" />Price: £200</p>
<p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").name("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>
Sounds like something you could solve entirely with CSS. As long as the container-div has a fixed height, you should be able to set the height of the img-element to height: 100%, causing the image to scale accordingly. However, this will not work while the display-mode of the container is set to display: inline. You will have to use display: inline-block to be able to set the height of the div.
In order to get a good help you should add a link to your website or the css files.
You will need some changes in the css and maybe (depending on the support you need) some javascript (jquery or zepto).
You could also use a pre build library but it's really not necessary.