I'm currently building a site using this framework template: http://cargocollective.com/montessori
My goal is to make the thumbnails scale in size to fill 100% of the screen, just like this site: http://mariohugo.com (resize window to see this in action)
Does anyone know if this can be done by modifying the CSS in any way?
That site is done with JavaScript - if you turn your JavaScript off, you get no images at all. Not very compatible!
You can do something similar with fluid CSS layouts, though it won't be quite as slick as that site.
have a look at twitter bootstrap framework http://twitter.github.com/bootstrap/. It might help you.
Related
I am trying to build a responsive carousel as present in Mecca website. I am using Bootstrap 4 and using slick plugin to build the carousel.
The look and feel i am trying to achieve is the something like this picture
As i am using boostrap 4, to build this tile, I have written the following code and codepen link is given below
[Codepen](https://codepen.io/bzaidi/pen/MWamJvZ)
I am facing the following problems
This carousel is not responsive. I need to change font-size using media queries on almost every resolution. If I see Mecca website, their carousel is perfectly responsive.
When i float the image left, the rightContent div seems to be taking all the width of parent div which is 290px? Why is that?
Is my approach correct?
How can I achieve responsiveness on all resolutions?
Can you someone help me?
Thanks.
The website is https://www.alisamesseroffphotography.com/ and the mobile site margins look awful. We use PhoPhoto in Wordpress, and cannot figure out how to add some margins.
Thanks so much!
What mobile site?
It's literally the same site.
You need to look at ditching or changing the theme.
As the other answer says, look at media queries : using a media query you can change how the page displays depending on the screen size it is viewed on. For instance, you could use this to add padding to the article-content class to force there to be white space around all the content on the page (but not the navigation or header image) which I think would solve your problem.
I think you should probably change the theme, something based on bootstrap would do a lot of the styling on a mobile device for you, and would make the navigation work better.
I am building a site for my friend, He specified a bug for me. He said,"When I Zoom in/out the browser, the Website layout “breaks apart” but it is working fine in 100% Browser Zoom."
Please let me know the Standard for web development for Browser Zooming
In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units
usually I don't consider zooming but if you want a good website that shows ok with different screen resolutions like in mobile browsers or tablet you'd better use responsive style sheets.
you do not need to write it by your own. you can use style sheets like twitter bootstrap which already supports responsive web pages
you can download it from here enter link description here
The webpage should be responsive enough like to work for "smaller screens" that is more or less how it will work for your CSS when they zoom in.
Make sure you have min-width or min-height set to your body or general container so, when it gets to this minimums it just stais as it looks.
For example, for the SO webpage, you have the div with id "content" inside the general div.container that has a width of 980px, so if you zoom in a lot it just shows the bottom scrollbar.
I am using a wordpress version of Supersized. My issue is that I wish to have this nice resizable full-width image gallery but be able to place the content below. An example of how I wish it to perform here; http://www.pedinilondon.co.uk/ They are using the non-wordpress version so are easily able to break it out of the template.
Is it simply a case of CSS or div manipulation or am I running into a brick wall with this? Should I be using a different knd of slideshow to achieve what I want?
Thanks
What you want sounds like fluid images (responsive design), which there seems to be a plug-in for that. http://wordpress.org/extend/plugins/wp-fluid-images/faq/
I saw this page where, when you change the window width, the layout change with simple animation. Does anybody know the name of this plug-in so I can look for some tutorials? I tried to look at the source code but I can't find anything useful.
I don't think it's a plugin -- it's probably using media queries, which are a part of CSS3.