I designed a responsive web page which is best viewed in 1680px screen. But when i am going to zoom out the page using view menu of firefox, The page layout is auto change with two columns also the contents of the page is changed to worst design.
The url of the page is
http://www.tuitionok.com/website-demo/indofast/
Screen Shot of the page which is best view in 1680px or greater px.
(this is the layout which i want in all pixcel)
Screen Shot of the page which is worst / not proper in less than 1680px.
I want the layout will be same which is shown in (1680px) in all resolution (zoom out/zoom in).
Can you please help me?
you will have to make change in your CSS Class or i would suggest to use bootstrap, it is not too much complicated to align using bootstrap for eg
for mast head you can specify bootstrap class in one row and column space col-lg-12
<div class="row">
<div class="col-lg-12 col-md-12">
---- Your content goes here
</div>
</div>
please refer bootstrap documentation for more details from here http://getbootstrap.com/
You have to use the Grid System layout for perfect responsive website,
So you can use Bootstrap or Foundation 5.
See also http://www.hongkiat.com/blog/bootstrap-alternatives/
Related
I've got a simple four-column card layout (Bootstrap grid), which collapses to a single-column layout on mobile. I want to embed a Facebook post within one of the cards. The problem is that Facebook embedded posts on desktop don't expand/collapse to fill their parent container, as they do on mobile. What I'd like to know is if there is a way around this. My cards are about 270px wide, which is below the 350px minimum width for desktop, according to their docs.
My container is a simple div like so:
<div class="content">
<div class="fb-post" data-href="{{post.facebook_link}}">
<!-- Here is what the embedded post's structure looks like -->
<span>
<iframe>
<!-- Widget lives in here -->
</iframe>
</span>
</div>
</div>
Right now when I embed a post in one of my cards, the post forces the card to expand, which wrecks my layout (see attachment). I'm looking for a way to force the post to fill the parent container either through a CSS/JS solution or tricking the Facebook SDK to thinking that it's on mobile.
I've only come across one other post on this issue, but that person explicitly wanted the mobile version of the post. In my case I don't care if it's the mobile version or desktop version as long as I can get it to fill the parent container. For that reason, this question is not a duplicate.
So far I've tried manipulating the height/width of the iframe and/or its parent span element, but as soon as I adjust those numbers, the changes are undone, since the SDK is setting them dynamically.
One way around this is that worked for me, was to use hidden and visible divs using bootstrap 3 css and adjust data-width in facebook code to suit the container size. I used this on my website here link to page if you want a live example. I understand your using iframe, but this was the only option I could find for my site. I have provided my code here just as a guide to illustrate my point, however you will be able to style it better than me as I a sloppy coder I'm afraid...
https://jsfiddle.net/andydry1/6t5o2n8z/1/
data-adapt-container-width="true" *make sure this is set to true*
data-width="300" *change width to suit extra-small, small and large divs *
This isn't the exact answer for your situation; However it may provide some help :-)
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
We are using MVC5 to build a responsive website. A developer who has joined the team has pointed out that we are adding markup to our cshtml pages to support the responsive design. He thought that really we should just be adding css classes to our elements and then letting the style sheet take care of the layout.
Currently we are adding to the cshtml class sections of code around controls like.
<div class="row">
<div class="form-group col-md-6">
#Html.LabelFor(model => model.TypeId)
#Html.EditorFor(model => model.TypeId)
#Html.PeritoValidationMessageFor(model => model.TypeId)
</div>
</div>
I suppose my question is - If I want a responsive design do I need to add the divs or is there some way I can apply css classes to my controls instead?
We are going to stick with Bootstrap for the responsive design and would not change the current approach unless it was relatively straight forward to do.
Thanks
Jake
Moving comment to answer:
"If I want a responsive design do I need to add the divs or is there some way I can apply css classes to my controls instead?"
Bootstrap requires a specific hierarchy of classes for its CSS to work, hence the need for extra divs. A lot of work went into creating the Bootstrap responsive layout. CSS alone is just not capable of the type of responsive design Bootstrap easily provides (you could hard-wire styles for each viewport size, but you will wind up with a much bigger mess than you started with).
Basically if you remove those divs you cannot have the control over the columns and layout they way Bootstrap expects. You will have to create custom CSS styles for the whole page, for each size, which defeats the aim of using Bootstrap in the first place.
Answer: Tell your designer that, while complete separation of style from content is nice in theory, that is not how Bootstrap works :)
As you can see from My website.
the photos on the right of the page are not really well aligned. Now i know i could just make the thr correct shape in photoshop although when the browser is re arranged the photos would just get displaced and look bad.
Question - How could I edit the carousal to possible just have pictures on the right and yet still have the text.
Sorry if I'm not 100% clear, as it may not be possible what I am trying to do.
Thanks.
Another possible form of question - is it possible to set a span within the carousel from which i can then put the picture?
Your carousel is not within a container.
Put <div class="container"></div> around the actual carousel container (<div id="myCarousel"></div> and it will align properly.
My theme shows that I can fit up to 4 widgets in the footer as shown in the demo site here:
http://demo.woothemes.com/?name=simplicity
But I can only fit 2 on mine when I'd like to have 3. Here's my site for my assignment:
http://www.brightpixelstudios.com/
I'm guessing I'll need to modify the CSS. I'd really appreciate any suggestions!
Thank you in advance,
Will
It is possible, if you look at the output, yours says:
<div id="footer-widgets" class="col-full col-2">
But changing the output to:
<div id="footer-widgets" class="col-full col-4">
Divides the width into 4 parts.
I can't help much more without seeing the actual admin side of the website, but if the col-4 is set dynamically, then it'd be a setting you'd have to change for the theme in the admin side.
you can use 'BNS Add Widget' wordpress plug in to add a widget area to the footer of any wordpress theme.
This is the plug in link : http://buynowshop.com/plugins/bns-add-widget/