Can I stretch my pages to dynamically fit peoples monitors? It’s not that apparent (see attached) on my display because I don’t have great resolution. However, there is a TON of blank space on for people who have high-resolution monitors.
I’ve found where I can stretch the header and such but not the entire page.
See image here:
thanks
The theme comes with a fixed width (I think 1164px) and it cannot be stretched in the manner you indicate because most elements are fixed at this width and messing with it will break the responsiveness. However, you can create a custom homepage with the td composer and then stretch the rows with the content (On Add element, select a row and drag it to somewhere on the page. Then click on that row and on the left, the box will display something like this http://prntscr.com/ikmfay. Click on the small font saying ‘row’ at the top, then scroll until you see something like this http://prntscr.com/ikmdqm and select the ‘stretch row’ option. There are several options to choose from there for various screen sizes (1400px+). For the posts, this will not work though. Coz even if you remove the background image and colour, there will be white space on the edges of the screen.
I see. Thanks. Is there any way to detect what resolution a monitor is and then display a certain page for the resolution? If not within the theme, is that even possible in web development in general?
I think the media queries used in CSS help in detecting the screen resolution of a device. The challenge with web development is that most designs are optimised for sites below 1200px because research shows people are nowadays accessing websites more through their phones than desktops. Maybe someone from the tagdiv team can provide a better professional answer.
The theme content width is fixed by default, it will not stretch automatically. Check the live theme demo
– https://demo.tagdiv.com/newspaper/
The theme does not have such a feature. There are row options in the composer to stretch them to predefined widths or full widths
– https://www.screencast.com/t/RlJHQWPbpFHU
Also there are full big grids, which are always full width
– https://demo.tagdiv.com/newspaper/full-big-grid-1/
Header and footer can also be stretched as you mention
– https://www.screencast.com/t/eDLhcqO6
You can also set backgrounds to each row or element (video, image, color), or a theme general color or image background.
OK . Thanks. Is what I’m asking even possible in the web developments? I would like it to be three different sizes depending on the screen resolution.
It’s not with one page, could I choose one of three pages depending on resolution?
For example..
If width is less than 800 display page 1.
If width is between 801 and 1200 display page 2.
If display is greater than 1201 display page 3.
That would be a complex task to realize, but surely there are methods to detect screen size then somehow based on it create cases and serve the content you want. I could not say hoe something like that is actually made, maybe there is more information online.
ok. If you don’t know how to do it and I certainly won’t know how to do it. Thank you
