Sorry for all the pestering about these webpages. We have created a video for one of our webpages and used a bit of inline bootstrap to have it align correctly for mobile devices.
I'm having trouble getting the video to resize correctly. Right now, it's set to display a specific width and height for desktop, but this is a problem for mobile.
What can I do to have a responsive video display on each device? Is there a particular way I should address the video link in code?
Here's the link: http://dalaigroup.com/maryland-seo/
Either you got some really crazy way of using BSS or that site wasn't created in BSS. There's a lot of stuff in there that BSS doesn't do so if you did it manually then no problem. If it's not made with BSS then we can't help you with your situation as this forum is for websites being created with BSS not other systems or software. Wouldn't do us any good to tell you to use the built in components in the BSS app if you're not using it is the main thing.
If it is made with BSS with some crazy inserting, then you just need to utilize the built in components for Video and Audio etc. That's what they are there for and that makes them responsive automatically. You don't set widths and heights on responsive components.
Thanks Saj,
I have been editing the code most of this morning and that's exactly what I needed. I have one more question.
I added a bit of styling for desktop and larger screens. Specifically, I adjusted the margin space. Is there a way they I can hide this styling specifically for smaller screens? I've used <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" and I'm not sure if I can display the styling for this class only on medium and large screens.
One stop hiding stuff that very likely shouldn't be hidden.
Main issue, the div with the class mythemes-page content-boxed post-10435 page type-page status-publish hentry add class row this will make it so the columns space correctly/better. COLUMNs should be the direct and only child(ren) of a row. Remove the inline styles for the padding and margins you have on the columns. If you need to modify them add a class and put that in your linked stylesheet. Where you can use media queries for screen break points.
That is an example on how you handle small screens sizes up to 767px wide.
Put the site back to the way it was before you started duplicating and hiding stuff and then add the row class and remove the inline-styling and add the IFRAME change. Then see how the site layouts for you then, so it's more in it's natural state. Then if you need to modify it give it a class and use the media query method if you need.
I have a feeling that the missing row might have thrown you off on the spacing of things.
Are you still trying to edit your code based on the Wordpress code? If you are I would strongly urge you re build your site from scratch using this tool as will ultimately help you in the long run when trying to edit in this app.
Thank you for all the tips. I'm following instructions from our on-call web developer to work with Wordpress, inline. This makes padding and margin adjustments difficult for multiple screen sizes without hiding or duplicating some content.
It shouldn't be permanent, but the circumstances of where to place the code are a little out of my control at the moment. I will definitely add the class ".row" Thank you again, Saj.
I do have one more question about some client logos that aren't centering properly here: http://dalaigroup.com/multilingual-seo-agency/
I've used the image class "center-block," but the logos in the orange banner still are not aligning in the center. It seems like they are floating toward the top of the row. I'm not sure if they should be treated differently due to a transparent background or maybe I'm missing something specifically for Wordpress media library images. If you have any class or style suggestions, please let me know.
Thank you both for pointing me in the right direction, given the circumstances.
Ok, well vertical alignment of content out side of a table can be a bit tricky and well hacky somewhat. DIVs don't work the same as a table cell, so I'll give you this code since flexbox makes it easy again :)
You can change that row's CSS to style="background: #fe8101;display: flex;align-items: center; flex-wrap: wrap;". That would get you to what you want on all major browsers, IE11/Edge, Firefox,Chrome
This is the code it's based on and I don't know if you can add all the different displays in an inline format though.
My only remaining issue is mobile. For some reason, it displays 4 of the logos in the first column and 2 of the logos in the second column. Even though I've used "col-md-2 col-lg-2 col-xs-6 col-sm-6" Maybe because of the "wrap" information.
Do I need to make a class or style change on the logos, so that there are 2 per row? 3 in the first column and 3 in the second column. Thank you, again
Ok, so I don't see this issue with desktop Chrome and Firefox even in mobile view. It window10 mobile they layout right and iPhone7 they layout ok, 1 then 2 then 2 then 1.
IE however has an issue with <meta http-equiv="X-UA-Compatible" content="IE=9"> That should be <meta http-equiv="X-UA-Compatible" content="IE=edge">
If you can't change it then you can't use flexbox at least correctly or fully or necessarily at all on anything below IE10. And that piece of code it telling the IE browser(s) to treat the page if your using IE9 which is causing oddities for IE. Chrome/Firefox effectively ignore it.
No you would need the wrapping part because flexbox by default does not wrap the flexbox content items.
If you can't change the meta tag, then I think the better solution would be to fix the images. With Photoshop you can add top and bottom transparent canvas space so you can make them the same height at the MTV logo. paint.net can probably do that as well.
Your cols are ok but you're kind of overboard with them.
col-xs works for anything so col-xs-6 means 2 columns on all screen sizes.
col-xs = mobile and up
col-sm = tablet and up, does not include mobile, mobile is reset to
effectively 12 columns but really just defaults div width to 100%
col-md = laptop and up, does not include mobile/table, mobile/table
is reset to effectively 12 columns but really just defaults div width
to 100%
See that patern there? meaning you can use 'class="col-xs-6 col-md-2"' should give you they same function as you currently have it, with less code.
Saj, you have been such a help. I was trying to fix all of our promotional pages before I responded.
Thank you for your recommendations on the image sizing and adjustments. I reduced the class code and got some proportionate images uploaded to the media library. Turns out the image sizing was really the majority of the issue.
I was wondering if your flexbox suggestions might work for vertically aligning header text, or if you would recommend something else.
I have a header image correctly in place for viewing on all devices, but I cannot seem to add text correctly, so that it is vertically aligned in the middle. This is what I have so far:
Not sure what I'm overlooking. I've tried a few different things for mobile and desktop. Here's the page, if you should need to take a look: http://dalaigroup.com/contact-us/
For desktop Chrome, Firefox and MS Edge, yes it would work fine. For anything IE11 or below, no it will not work because of the meta tag <meta http-equiv="X-UA-Compatible" content="IE=9"/> which set any MS browser lower than Edge to behave as IE9 which does not work with Flexbox. Modern mobile browsers should work with flexbox though.
What you could try to do is set the H1 to display:table-cell; and then set it's parent DIV to display:table;
You could try using padding to position the H1.
You could try using absolute positioning H1 .
There are several ways to try it just what makes better sense to you. If you can't do the flexbox I'd probably do the display table methods.