margins on smartphones
Support Area › Forums › Responsive Visual › margins on smartphones
- This topic has 5 replies, 2 voices, and was last updated 10 years, 4 months ago by Bill Robbins.
-
AuthorPosts
-
November 4, 2013 at 06:17 #15081GorParticipant
Hi Bill,
I have some problems viewing the template in my smartphone (in this case iPhone), do not adjust the margins of the text and the videos.
I add a couple of pictures for you to see more clearly.
greetings
Gorka
Attachments:
November 4, 2013 at 08:48 #15085Bill RobbinsModeratorGood Morning,
I hope you had a nice weekend. I believe we can straighten out the padding there a bit for you. Give this a try:
- Go to the Theme Options page and select the Styling tab.
- Scroll down to the Custom CSS box and paste this:
@media only screen and (max-width: 767px) { #sidebar, #content, #content.full { width: 100%; padding: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .featuredpage .widget-title { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .featuredpage img { width: 100%; max-width: none; } }
- Update your settings.
That should even things out. If you have any questions or trouble, just let me know.
Thanks,
BillNovember 4, 2013 at 16:20 #15104GorParticipantHello bill,
thanks for the solution
this solves the problem of margins on pages and post. But I still have the problem by introducing the videos directly with the url in the posts.
As a temporary solution I have writed the code by giving iframes with specific height and width, now they fit well on my smartphone but they are too small on monitor views
<iframe width="260" height="146" src="//www.youtube.com/embed/J1UyiKNaoeg" frameborder="0" allowfullscreen></iframe>
I would like to have a standard width and height and they will change to different margins tablets or smartphones.
I tried changing the percentage of the width
. video-content { width: 86%; padding: 2%; }
adding it to the code you gave me, I found it on line 1290 of style.css within / * Small Tablets & Phones * / but does nothing.
sorry for the inconvenience
Gor
November 4, 2013 at 17:08 #15105Bill RobbinsModeratorGor,
For the videos, there are two options for you. You can add them by making the page/post use the video format. Then place the embed code in the box for it and the theme will make the video responsive automatically.
There’s also a shortcode for making videos responsive in the content of a page/post. To do that, use this:
Just replace the
your video URL or embed code
with either the URL to your video on a service that supports oembed like YouTube or Vimeo or the actual embed code if you’re adding this to the text and not visual editor.See how that works for you. You’ll probably want to change back the video style in the style.css file.
Bill
November 4, 2013 at 17:50 #15106GorParticipantOk well done!
I didnĀ“t know the second option, I think I’ll choose it.
I have tested and seems that works great.Thanks once again
regards
Gorka
November 4, 2013 at 18:07 #15107Bill RobbinsModeratorAnytime Gorka. Have a good night.
-
AuthorPosts
- The topic ‘margins on smartphones’ is closed to new replies.