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>
Related
I'm new to writing HTML and CSS, but I am on the final step of creating my website. Namely, the image slider which resides in the background.
The Issue: The pictures are not centered respective to the viewport.
The first image, for example, should have some padding on the left and
should be vertically aligned so as not to move when the height of the
image increases to match the viewport height. It should remain
centered behind the body of the page.
New Issue: When the first image's width expands over the viewport's, the images begin to move off-center because they are being locked at the left-hand side of the parent class/viewport. Is there a property that will allow the child class elements to expand past the parent's boundaries?
Could some of you wise web devs help me out here?
CodePen full version of the website: CodePen Link
Please go to "Full View", minimize your browser, and shorten its width to see what I mean.
Here is my HTML code for the slider:
<!-- Inside <html></html> and below <head></head> -->
<div class="background_carousel">
<div class="carousel_slides">
<div class="slide">
<img src="./img/slideshow/s%20(1).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(2).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(3).jpg">
</div>
</div>
</div>
and my CSS for the slider...
.carousel_slides {
display: flex;
background-color: #999999;
width: max-content;
text-align: center;
}
.carousel_slides .slide {
position: static;
height: 100vh;
width: 100vw;
}
.slide img{
height: 100%;
}
Huge thank you in advance.
Use position and dynamic adjust left with click
Three divs each above the other, within a parent container. Top div is fixed height. Bottom div has content that takes up an unknown amount of vertical space but needs all content within it to display. Top div should fill remaining vertical space. Every
<div id="container"> // 100% of visible window height but should not overflow
<div id="top"> // Fixed height
</div>
<div id="middle"> // Use remaining vertical space
</div>
<div id="bottom"> // Unknown height but contents should all be shown
</div>
</div>
I need to support recent-ish legacy browsers (e.g. IE9+) & mobile browsers (e.g. Android 4.4+), so flexbox based layouts are out. I tried Javascript (using JQuery) to try and set
middle div height = container height - (top div height + bottom div height)
but for some reason the browser was mis-reporting the bottom div height during page render (latest Chrome on Win 7) so result came out wrong. And I'd like to avoid JS if possible (tho am open if a solution works).
Need to support as many desktop and mobile browsers as possible.
Thanks
For old browser , where flex cannot be used , display:tablecan be a fall back but layout will be able to grow past window's height where content is too long to be shown at once.
A CSS only mix using flex and table as a fallback where flex is not supported: https://codepen.io/gc-nomade/pen/BdWXpp
Below, snippet with display:table/table-row CSS only (which works for almost any browser (IE8 and next)
html,
body,
#container {
height: 100%;
width: 100%;
margin: 0;
display: table;
background: turquoise;
}
#container>div {
display: table-row;
}
.buffer {
display: table-cell;
/* display is optionnal but element is required in HTML to keep layout as a single column and allow vertical-align to content*/
vertical-align: middle;
text-align: center;
}
#top {
background: orange;
height: 100px;
}
#middle {
height: 100%;
}
#bottom {
background: tomato;
}
<div id="container">
<div id="top">
<div class="buffer">top 100px, test me full page and in any medias
</div>
</div>
<div id="middle">
<div class="buffer">Use remaining vertical space
</div>
</div>
<div id="bottom">
<div class="buffer">Unknown height<br/> that fits <br/>to content to hold
</div>
</div>
</div>
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/
The width of my Web page is 1680px. No matter how big the resolution of the other monitors is (1920px, 2560px, 2880px,...), let the width of my Web page be same as 1680 px. I tried to make it by using "iframe", but problems occur. How can I do it using Jquery?
don't understand why you want do that but :
You can create a container on your body
<body>
<div class="container">
<!-- your page -->
</div>
</body>
and set the width to 1680px in css...
.container{
width:1680px;
margin:0 auto;
}
The scenario:-
A published HTML page has position:absolute DIVs and all DIV heights are set to specific px values. The page is editable via an online CMS such as Surreal or Cushy. The editor enters more content that the DIV was designed to take. The result is that the extra content overflows the DIV and the page design is trashed.
Is there any way that when an editor does this that the DIV height expands AND all other DIVs on the page move down? Bare in mind that the DIV heights cannot be set to 100% but have fixed px values.
I am assuming the solution maybe jQuery or JavaScript - any ideas?
<body>
<div id="two" style="position:absolute;left:163px;top:0px;width:738px;height:269px;z-index:5;padding:0;">
<img src="images/two.jpg" id="two" alt="two" border="0" title="two" style="width:738px;height:269px;">
</div>
<div id="three" style="position:absolute;left:0px;top:350px;width:900px;height:294px;z-index:6;" class="editable">
<!-- div content -->
<!-- this is where the user/editor will add content -->
</div>
<div id="four" style="position:absolute;left:0px;top:0px;width:900px;height:323px;z-index:7;padding:0;">
<div id="five" style="position:absolute;left:0px;top:0px;width:162px;height:269px;z-index:0;padding:0;">
<img src="logo.gif" id="logo" alt="Logo" border="0" title="Logo" style="width:162px;height:269px;">
</div>
I don't see exactly the scenario, but have you considered the scroll within your fixed size divs ?
Give a class to those divs, such as
<div class="bescrollable"></div>
and then in your css :
.bescrollable {overflow:auto;}
scrollbars will be added when overflows occur
You can set height of the div according to the content like this:
.container {
position: absolute;
width: 400px;
height: 400px;
}
.content {
width: 100%;
height: 100%;
}
<div class="container">
<div class="content">...</div>
</div>
$('.container').css('height', $('.content').height());
Here a fiddle: http://jsfiddle.net/Kdktw/
As CBRRacer mentioned in the comments, if we could see the HTML, the answer would be more accurate to your situation.
I hope this helps!
This would be predicated on the height of the content within the box. Probably the best method would be to have the height of the content div set to auto and use javascript to get the height of the element.
// Using jQuery
var contentDivHeight = $('#myContentDiv').height();
var startingOffset = 250; // The height of the div original set at startup
Then you could simply add this height to each of the primary display controls that would have to be moved "down". If you assigned them all a common class they could all easily be selected (such "primaryInterface" or something).
$(document).ready(function() {
$('.primaryInterface')each(function (i) {
var newTop = this.offset().top + contentDivHeight - startingOffset;
var newLeft = this.offset().left;
this.offset({ top: newTop, left: newleft });
});
});
This code is untested, but ideally, once the page loads, it would find all of the elements with the specified class and set their top offset to be the difference between the starting height of the div and the resultant height.