I am trying to get this page to be fully responsive:
http://www.comm-works.com/limitless/about-us/testimonials/
I added custom css in each widget to create larger fonts. and a custom background in each row, however, when reduced to mobile all images and text stay at full size.
URL: http://www.comm-works.com/limitless/about-us/testimonials/
Hi Ryan
You can try including your custom CSS in between this media queries
@media screen and (max-width: 480px) { /*insert your custom code*/ }You can adjust the 480px there to any other figure that will meet your requirements
Cheers
Thanks for your response Addo, unfortunately I am unable to get this to work.
To clarify, I am editing using the individual Widget Styles >Attributes.
For the backgrounds I am using edit row > Theme > Background Image URL
These items are not on the Custom CSS page.
This what I have in the custom css is to remove margins for that specific page.
.page-id-460 #main {
padding-top: 0;
margin-top: 0px;
padding-bottom: 0;
}
How do I use that media query your provided to apply to the same page?
Ultimately, I would like this function to apply to the entire site.
Hi Ryan
Would it be possible for you to create a temporary admin account for us so we can log in and take a look at your CSS? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
This is a private message.
Hi Ryan
You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
/*testing responsiveness*/ @media screen and (max-width: 780px) { #pgc-460-1-1, #pgc-460-2-1, #pgc-460-3-1 { width: 73.281% !important; float:right!important; } #pgc-460-1-0, #pgc-460-2-0, #pgc-460-3-0 { margin-bottom: -200px!important; } #pgc-460-1-0, #pgc-460-2-0, #pgc-460-3-0 { width: 26.719%!important; } }Let me know if that sorts out your issue
Cheers
Thank you Addo. I appreciate your help. It’s not perfect but its a start. Would I have to do this then for every single page or is there a way to apply it to multiple pages or the entire site? I am creating several pages with the same structure.
Hi Ryan
The given custom CSS was a guide on how to make the changes to make it perfect on different screen sizes. To adjust for smaller screen you need to change the size on the media query e.g.
@media screen and (max-width: 480px) { /*adjust your custom code*/ }You could try cloning the page and the css will apply to them.
Cheers