Skip to main content
T
theos71901143
Known Participant
August 4, 2017
Answered

Responsive Website

  • August 4, 2017
  • 2 replies
  • 650 views

Hello,

Im a complete noob when it comes to this so forgive me if this is a simple question ( I have tried google and it doesnt seem to know what Im talking about).

I have a website which is a bootstrap template: www.theosparks.co.uk

Its all good except some annoying things that I hope are easy to fix.

1. (this is the main problem) When I go on my phone to view the website,it doesnt look good. The main thing is, the top video doesnt scale to fit my screen, and if I double tap to zoom out then everything else is too small and looks bad. I think I just need that video to scale with everything else, then it will be good.

The other thing that bugs me, if I click into one of my projects, its automatically zoomed in and I have to zoom to see it all which feels really shoddy. Im just scared that a techno-phobe client will look at my website and not zoom out and get frustrated and give up looking at my site. I dont understand it. Its like its got something to do with my initial top video, because if I zoom out so it fits, when I click into a project its all zoomed out to the correct size, but then everything else on the home screen is all zoomed out and cruddy looking.. Sorry for the rambling but Im just trying to explain clearly cuz I dont know this sort of language.

Anyone know if theres a simple solution to this?

2.(this ones just a little thing that I could easily live without, but it would be nice) Is there any way to customise this image for each project? Or having custom text for each one? Maybe even changing the colour?

Any help on these issues would be greatly appreciated,

Thank you for reading my rambling,

Theo Sparks.

This topic has been closed for replies.
Correct answer BenPleysier

1. See http://getbootstrap.com/components/#responsive-embed

When I look at your page, there is no zoom problem, the page shows as is . Which browser are you using?

2 replies

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
August 4, 2017

1. See http://getbootstrap.com/components/#responsive-embed

When I look at your page, there is no zoom problem, the page shows as is . Which browser are you using?

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
O
osgood_
Legend
August 4, 2017

theos71901143  wrote

1. (this is the main problem) When I go on my phone to view the website,it doesnt look good. The main thing is, the top video doesnt scale to fit my screen, and if I double tap to zoom out then everything else is too small and looks bad. I think I just need that video to scale with everything else, then it will be good.

Use the Bootstrap class for responsive media, add it to your 'intro-text' <div> which wraps your video:

<div class="intro-text embed-responsive embed-responsive-16by9">

The above applies to any video you have in your modal windows. Also in your modal windows you need to add the img-responsive class to all the images you want to be responsive:

<img src="img/optamised/screening.jpg" width="500" height="300" class="img-responsive">

T
theos71901143Author
Known Participant
August 4, 2017

Hey thats some great straight forward advice, thank you!

Few questions:

1. After Ive made the top video responsive, is there any way of changing its initial size so that it doesn't fill up the whole start screen of my site?

2. After I changed the image to responsive, is there a way of making it centered again? (when I change it to responsive, its makes to the left hand side of the site, it looks better in the center with everything else).

3. My videos in my project windows dont have div-class=intro. I cant seem to find where to put it for those videos without it screwing everything else up on the page.

Thanks for your advice, Much appericiated

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices