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 :-)
Related
I am using the Gatsby/MUI starter as a boilerplate for my personal site. In my personal site, I am having the problem that all pages are rendering as slightly larger than the viewport size. This issue is consistent on mobile and laptop/desktop sized screens.
I am using MUI Grid. I have made sure that my meta viewport head element uses width=device-width. As far as I can tell this does not depend on fixed-size elements or grid spacing options, such as margin or padding.
Does anyone have any debug suggestions or would anyone like to see a particular piece of information that would aid in the debug process? Site is available at https://errcsool.com
My code is available here
Update: If I get rid of all pages except for index, this problem occurs as soon as I place something inside of an MUI with spacing options <Grid container spacing={x}>
Solved. Adding a root div element with padding at least half of spacing pixels, so for spacing={8}, the root div should have padding={32}.
This is well-known functionality of Material-UI Grid.
Related to this issue.
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/
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.
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.
How do I skin shadowbox and make sure popup size is fixed size?
The css part is ok since it's just overriding ids and classes.
However, I'm not sure what the markup.js is supposed to look.
So here are my questions:
I created shadowbox-custom-skin/markup.js and added the hook like:
add_filter('shadowbox-markup', 'shadowbox_custom_markup');
Now I can't find an example of how the markup.js is supposed to look.
(I'm trying to put the sb-nav div before the content and the sb-title div below the content and also add some new parameters).
I fixed the size of the popup using this method:
rel="shadowbox;width=480px;height=240px"
handleOversize resize no longer works. Meaning, it will resize content, but it's squeezed.
How do I make sure the popup is the same size, but oversized content isn't squeezed and small content is just centered?
You don't really need to tweak javascript to do this. Using the property inspector on your browser or the Firebug plugin, right click on the Shadowbox and see what css classes/ids are being used. Put those css classes/ids in your own stylesheet apply the styles you want. Then upload the file to your server.