Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 7, 2014 at 4:30 pm #248265
    colingoldberg

    Hi,

    I am using a logo which is 340×88 in the enfold theme, and it gets cut off in the mobile view (iPhone). Is there some CSS I can use to scale this properly in mobile view, while not having to reduce the size of the logo in the desktop view ? A photo showing desktop and iPhone screenshots is below:

    Desktop and mobile views

    The test site is here.

    Thanks,
    Colin Goldberg
    Everbeta LLC

    April 7, 2014 at 4:34 pm #248267
    Yigit

    Hey colingoldberg!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img {
max-width: 80%;
height: auto !important; }}

    Regards,
    Yigit

    April 7, 2014 at 4:43 pm #248273
    colingoldberg

    Awesome, thanks for the quick response Yigit! That fixed it
    (I added a little padding to the top to vertically center the logo for mobile..)

    Another quick question… I have the slider control arrows hidden in the slideshow (desktop view), but they still show at the bottom of the page on the mobile view – can I hide them there as well (as well as the text indicating ‘slide 1’) ?

    mobile

    Thanks!
    Colin

    April 7, 2014 at 9:46 pm #248487
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
#top .avia-smallarrow-slider .avia-slideshow-arrows, .avia-content-slider .slide-entry-title { display: none; }}

    Cheers!
    Yigit

    April 17, 2014 at 12:59 am #252345
    colingoldberg

    Hi Yigit,

    A few more responsive-related questions :

    1) in portrait view on my iPad, the mobile navigation kicks in and works great, but in landscape view, the logo cuts off – is there a way I can specify a percentage size for this size as well to prevent the logo for getting clipped ? I wasn’t sure of the exact @media query I should use.

    Image:
    ipad - landscape

    2) I also noticed that when the browser on a desktop is below a certain width, the navigation “jumps” to the left, which brings it right to the edge of the logo as well:

    desktop

    Is there a way to define scaling for this size as well to make the logo a bit smaller in this view ? If the browser is opened wider, there is plenty of room:

    Site URL:
    http://everbeta.com/lexobgynnyc/

    3) does the additional CSS need to be added to the Quick CSS box in a certain order to maintain the current scaling for phone view ?

    Current CSS for logo scaling on phone (from your advice above in this thread):

    @media only screen and (max-width: 480px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 80%;padding-top:10px;
    height: auto !important; }}

    Thanks so much for all of your assistance !
    Colin

    April 17, 2014 at 12:52 pm #252646
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 1140px) {
.av-main-nav > li > a {
padding: 0 7px; }}

    This should answer all 3 questions of yours

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.