Highlighted

Accessing the width of the Live View

New Here ,
Aug 24, 2018

Copy link to clipboard

Copied

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!

Views

317

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Accessing the width of the Live View

New Here ,
Aug 24, 2018

Copy link to clipboard

Copied

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!

Views

318

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 24, 2018 0
Adobe Community Professional ,
Aug 24, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
New Here ,
Aug 24, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
LEGEND ,
Aug 24, 2018

Copy link to clipboard

Copied

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

)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
New Here ,
Aug 24, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
LEGEND ,
Aug 24, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
New Here ,
Aug 24, 2018

Copy link to clipboard

Copied

pziecina  wrote

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?

Just looking to see if there is a quick and dirty way to use the DW Live window sizing using the mouse, and have my code work with those values,rather than go the slow way and have to type in different page widths to see what happens at each page width.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
LEGEND ,
Aug 24, 2018

Copy link to clipboard

Copied

So your question has nothing to do with the end user viewing in a browser?

If it is just Dw, what you are talking about is using Dw ruler set to pixels, (don't know if CC still has the ruler, but CS6 does) you would still have to include the pixel measurement yourself in the media-query, but if you use the ruler and decrease the live view window, then simply use note the pixel value to use just before the layout starts to break down, (its how it used to be done originally).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
New Here ,
Aug 24, 2018

Copy link to clipboard

Copied

pziecina  wrote

So your question has nothing to do with the end user viewing in a browser?

Correct.

pziecina  wrote

If it is just Dw, what you are talking about is using Dw ruler set to pixels, (don't know if CC still has the ruler, but CS6 does) you would still have to include the pixel measurement yourself in the media-query, but if you use the ruler and decrease the live view window, then simply use note the pixel value to use just before the layout starts to break down, (its how it used to be done originally).

That is what I wanted to avoid...typing in the width value corresponding to the position of the ruler, when it would be so much faster just to drag the right edge of the window and watch what happens to the page as the width changes in real-time.  The key is that I wanted to USE the real-time width value in calculations.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
LEGEND ,
Aug 24, 2018

Copy link to clipboard

Copied

treddie  wrote

That is what I wanted to avoid...typing in the width value corresponding to the position of the ruler, when it would be so much faster just to drag the right edge of the window and watch what happens to the page as the width changes in real-time.

That is what you would be doing.

You would not create any media-queries initially, but instead only create them as and when the design starts to break, as the live view gets smaller (its called desktop first development).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
Adobe Community Professional ,
Aug 24, 2018

Copy link to clipboard

Copied

Conversely, you could build mobile-first layouts which might resemble this:

  • Default -- one column wide on xs,  <576px wide
  • 2 columns on sm,  ≥576px
  • 3 columns on md,  ≥768px
  • 4 columns on lg, ≥992px
  • 5-6 columns on x-lg,  ≥1200px
Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 1
pziecina LATEST
LEGEND ,
Aug 24, 2018

Copy link to clipboard

Copied

As you say, mobile first is also a method of development, though with the increase in screen sizes, 4k desktops and tv/game-console usage, i have found that starting in the middle, (standard desktop) leaves me with more flexibility.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 2
Adobe Community Professional ,
Aug 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 1
New Here ,
Aug 24, 2018

Copy link to clipboard

Copied

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! 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
Adobe Community Professional ,
Aug 24, 2018

Copy link to clipboard

Copied

See screenshot.

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0