I have chosen a template and built my wix site. After completing the site I submitted a ticket and was directed here to get my question answered as they told me the wix editor was not capable of building such a site. For the purposes of this question, I’m going to refer to mediaqueri.es for example site layouts.
The site I built has a fixed page width of 980px. This means that in the desktop view, the page contents will remain in the middle 980px of the screen and background images will stretch to fill the width of the screen. See CapRadio GO Anywhere Raffel. On wide monitors, the contents of the site seems to be squished in the middle and not fitting the monitor all that well. To fix this, I could have background images not extend the width of the screen, but rather just the 980px width of the page. This would convert the site to the layout of the Newsweek site that has the site in the middle of the screen and blank real estate surrounding the page contents. This could work but is less than desirable as it looks like the old table based sites of the 1990’s. Upon further review of my site, I have a scrolling image gallery that will not resize other than full screen width making this rather difficult. I’d probably need to place it in a div with a width of 980px.
What I want to achieve is to take the fixed width of 980px and convert it to a dynamic width of 100%. This would allow the site to completely fit the screen. I would then like to convert the absolute positioning of page elements into relative positioning such that the page seems to stretch or shrink to fit the screen and retain as much of the layout as possible regardless of screen size.
I have tried using firebug to identify page elements and give them a dynamic width of 100%. I added an HTML block to my pages and tried adding CSS to make the changes, but was not successful. As a web developer, I like to have total control of the code so that I can make things fit the screen as needed. How do I get access to the code of my site to modify the template where appropriate? I want it to be truly dynamic and not as inflexible as it is now.
Then why did Wix support staff suggest this to me as a possible solution? Maybe I should build my own code and not use a template? I could use the HTML code object and get what I want right? Why does this have to be so difficult?
It’s a tool, that gives you ability to create dynamic content, build custom logic between components, gives you API to embedded or 3rd party services. Think of it as internal framework to add custom functionality to existing abilities.
WixCode project doesn’t replace main editor, it adds new abilities to it
Oh. On a good note, sifting around the site with firebug…
I dug into my bag of tricks and was able to modify all DIVs to be width:100%. I added an HTML element and some CSS. With enough persistence, I can even figure out all the site elements CSS classes and style them to be relatively positioned as I’d like them. I might need to add a few containers and set them to float right or left and maybe a media query or two to make page elements show up where I want them to.
This all begs for the following question to be asked: might there already be a template that is not based upon a fixed width? I hate to spend a day or 2 overriding the CSS of this template. The only bad thing is that I would have to rebuild the site if I change templates. And how do I know if the template is what I’m looking for without spending forever starting a new site for each template just to try it?
That is the question that i can’t answer, as this is forum dedicated to WixCode issues and questions. The only answer i can give you is to ping support again
Mike, how did you end up “hacking” the CSS and adding your custom modifications? I’ve been trying to figure this out for hours. I can’t for the life of me figure out how to add my own CSS to my site. I know Wix purposely makes this not possible, but there has to be a way around it. What did you do? Thanks in advance! - Alex
You can view all templates without committing to using them by hovering over any given template and selecting “View” to see an example of said template. I am not sure how (or if you even can) view a new template on your current site without actually switching its theme to the new template.
I might need to add a few containers and set them to float right or left and maybe a media query or two to make page elements show up where I want them to.