Participating Frequently

Question

Accessing the width of the Live View

Forum|Forum|7 years ago
August 24, 2018
4 replies
677 views

Hi!

I have built some CSS code to change the positioning of page content in a fluid manner as I drag the right edge of the Live View window in or out. However, I do not know how to access the page width indicated by the ruler above the window. Is there an accessible variable that holds this information that I can utilize in my code? If so, what is the syntax to use it?

I have been searching for an answer but am coming up empty. My thought was that it would be something called Viewport Width, or something like that. Or is it just the width property of the page? A related question is that, given that each CSS selector has properties, what is the syntax for using those properties in calculations while inside another selector?

Cheers!

This topic has been closed for replies.

Nancy OShea

Community Expert

See screenshot.

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Community Expert

In javascript, use window.innerWidth and window.innerHeight: Window innerWidth and innerHeight Property

T

treddieAuthor

Participating Frequently

https://forums.adobe.com/people/Jon+Fritz+II wrote
In javascript, use window.innerWidth and window.innerHeight: Window innerWidth and innerHeight Property

If I go that route, I'll have to learn java!

pziecina

Legend

You would have to convert the property to a css variable, then use it as part of a css calc() function.

(look up both for how to use, try using the resources section for each at -

https://caniuse.com/#feat=calc

)

T

treddieAuthor

Participating Frequently

pziecina wrote
You would have to convert the property to a css variable, then use it as part of a css calc() function.

That is where my problem is...I do not know if the Live window width can be accessed so that I can put it in a variable.

pziecina

Legend

For that you would have to use javascript, but you can then place the js result into a css variable for use.

What are you trying to do that you require to know the viewport width?

Jon Fritz

Community Expert

The width shown in that ruler is just the viewport width being used currently by DW. You can use those numbers in media queries to target specific break points where your fluid design needs more help than % widths can give.

Look into "CSS Media Queries" if you're not familiar with them.

An example would be:

@media screen and (max-width : 1024px) {

.green {background-color:green;}

}

In the most basic form, you can change your css depending on the user's viewport width. The above will turn the background of <div class="green"> green whenever the viewer's browser window is under 1024 pixels wide.

T

treddieAuthor

Participating Frequently

https://forums.adobe.com/people/Jon+Fritz+II wrote
The width shown in that ruler is just the viewport width being used currently by DW. You can use those numbers in media queries to target specific break points where your fluid design needs more help than % widths can give.

I am currently looking at media queries, but I was more interested in if I could get the Live window width value and use that for now to speed up the process of designing my page, by just dragging the live Window. Otherwise, If I code in different values based on a simulated media query, am I not correct in assuming that I would have to test for each value individually?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded