I am trying to setup a header for one of my map animations. I can place the logo and one more image on the header, more or less, but if I resize the browser the images stay with the same size.
Can anyone tell me what is wrong?
here is a link to see
The source code is available in github as you can see.
Thanks for your time
Try this
<img src="images/logo-b.jpg" style="width:35%;">
<img src="images/wave_b.jpg" style="width:60%;">
Related
I am new to this website so there might be similar question.
I have created the website with Joomla using Bootstrap.
http://theeruditepen.com/
I needed to update the website and after I updated, everytime the top logo (the top of the page and image (theEruditePen_Logo1.png) disappear in the mobile environment.
It used to show before, but some update change made the logo disappear and I do not find out how to fix it...I really want to show this logo even the mobile environment on top of menu.
I would really appreciate any tips and help.
Thank you
<img
src="/templates/theeruditepen/images/theEruditePen_Logo1.png"
class="visible-tablet visible-desktop img-responsive"
>
Remove visible-tablet visible-desktop class from the image tag.
The above classes will show the image only on tablets and desktops, and will hide it on mobile devices.
If u want to show the image on all devices, then remove the classes.
Or you can add .visible-phone to make it visible on phones
I run into a similar issue in the past.. the solution for me it was the following:
First I checked the type of module in which my element was placed (custom module, articles module, category module, etc).
After that, I checked the especific module option configuration (image attached as an example) and set the mobile option to on. enter image description here
Hope it helps.
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 used the online Swiffy tool to convert a SWF file.
It all looks perfect when I use the code supplied, however I wanted it to be responsive, so changed the fixed size of the container to 100% width, and auto height.
Now when I view the file the whole canvas seems to slowly zoom in from tiny until it fills the page.
Whats happening here? Why does it insist on animating itself into position rather than just appear filling the screen width?
Many thanks in advance
I experienced similar problem. Check this line carefully:
<div id="swiffycontainer" style="width: 176px; height: 208px">
Make sure not to add anything after "208px".
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.
Im working on a site's gallery which is made of a thumbnail block displaying all the pictures
and a section for displaying a specific image.
This is the code i use to display the thumbnail and the image in its real size.
<a class="thumb" name="tuzla1" href="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" title="Tuzla">
<img height="75" width="75" src="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" alt="Tuzla" />
</a>
The problem is: I can't think of anything to set the size of the opened image. Setting the thumbnail size is fine: height="75" width="75" but the size of the opened one is the problem.
Using this method, you can't set the size of the image you're linking to. It's going to open in the browsers with no HTML associated with it, so it will open at it's full size (or scaled to fit, depending on the browser).
The solution is to link to a page that contains the image. This lets you set code that determines the image size. However, this is a manual process - 500 images will require 500 custom pages. Not ideal.
If you get more sophisticated, you can build a script and pass it and image name, height and width, then dynamically build the page to display the image at the given height and width. Then you can display an arbitrary number of images with 1 script.
Another way to go is with a lightbox plugin which lets you pop the full sized image up into a box over top of the rest of the page. You've probably seen this method used on Facebook or other sites - it's popular and doesn't take that much effort to use. I like it because you don't have to leave the page you're on, and you can show lots of photos on a fairly compact page.