Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • June 12, 2019 at 6:05 pm #1109551
    mattwalt

    I have added a header widget but its above the logo and against the right hand of the screen.

    How can I move so its in line with the logo?

    Thanks Matt

    June 13, 2019 at 6:37 am #1109724
    Rikard

    Hey Matt,

    Could you post a link to where we can see the element in question please?

    Best regards,
    Rikard

    June 13, 2019 at 9:26 am #1109801
    mattwalt

    Its a little tricky due to the server setup.

    Try the links below.

    June 13, 2019 at 7:32 pm #1110013
    Victoria

    Hi julie_ferrand,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    June 13, 2019 at 7:46 pm #1110029
    mattwalt

    Hi Victoria

    As per the image (link attached)

    The telephone and number need to be in line with the logo and aligned to the body area on the right.
    Also the telephone and email should move below the logo as the screen shrinks to mobile ( it would be nice if its possible for the details to be centred and centre aligned as it gets to smaller screen widths)

    Thanks Matt

    June 14, 2019 at 5:40 am #1110197
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    #text-10 {
    position: absolute;
    right: 20px;
}

    Best regards,
    Rikard

    June 14, 2019 at 9:45 am #1110255
    mattwalt

    Thanks – added, but has not affected any change.

    June 14, 2019 at 9:48 am #1110256
    mattwalt

    Sorry – cache.

    Its moved the logo down… And just away from the side.

    Could it not be aligned to the body? Also move below the logo as the screen gets to mobile view?

    Thanks Matt

    June 14, 2019 at 7:29 pm #1110437
    Victoria

    Hi Matt,

    Please adjust the css above to this:

    
@media only screen and (min-width: 1024px) {
  #text-10 {
      position: absolute;
      right: 70px;
  }
}

    There is no room for the widget on the mobile. It has to be hidden.
    Best regards,
    Victoria

    June 15, 2019 at 11:39 am #1110641
    mattwalt

    Thanks Victoria – that works much better.

    Any way to have the details flow under the logo?

    June 17, 2019 at 5:59 pm #1111068
    Basilis

    Hi,

    Which details?

    Best regards,
    Basilis

    June 18, 2019 at 10:49 am #1111256
    mattwalt

    The tel no. and Email. At the moment as the screen shrinks down it forces the logo down and shifts in above.

    Thanks Matt

    June 18, 2019 at 6:24 pm #1111396
    Victoria

    Hi Matt,

    Here is my next solution for you

    
@media only screen and (max-width: 767px) {
  #text-10.widget {
      padding: 5px 0;
  }
  #text-10.widget h1 {
      margin-bottom: 0;
      font-size: 16px !important;
      margin-right: 10px;
  }
   #text-10.widget p {
     margin: 0;
     margin-right: 10px;
   }
}

    Best regards,
    Victoria

    June 19, 2019 at 12:13 am #1111508
    mattwalt

    Thanks Victoria = that is so much better.

    Is there anyway to have the telephone and email address go below the logo at that breakpoint?

    Also between 1024 and 767 the details push the logo quite far down (I assume it may the the div size for the widget). Looking at it it may be possible to keep the details centre to the logo on the right right until the break at 767. We could easily make the text smaller at this stage.

    Thanks Matt

    June 19, 2019 at 2:51 pm #1111607
    mattwalt

    OK – I have sorted the break points. If I can just get the info to flow beneath the logo in mobile view (below 799px). That would be awesome.

    Also how difficult would it be to have the logo also centred on mobile view? I tried but seems to be a empty space t the right.

    June 20, 2019 at 5:44 pm #1112017
    Victoria

    Hi Matt,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive #top .logo {
      width: 70%;
      margin: 0 auto;
  }
}

    I could not get the widget below, it gets covered by the menu.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 20, 2019 at 6:28 pm #1112033
    mattwalt

    Thanks Victoria – that is so much better.

    Any way to get the telephone number and Email under the logo at 799 (767)px?

    Thanks.

    June 20, 2019 at 8:18 pm #1112095
    Victoria

    Hi Matt,

    How about this one:

    
@media only screen and (min-width: 480px) and (max-width: 799px) {
  #text-10.widget h1 {
      width: 26%;
      float: left;
  }
  #text-10.widget p {
    width: 44%;
    float: right;
  }
}

    Best regards,
    Victoria

    June 21, 2019 at 11:55 am #1112303
    mattwalt

    Thanks Victoria – that splits the tel and email and has on either side. But its still above the logo.

    M

    June 22, 2019 at 8:53 pm #1112618
    Victoria

    Hi julie_ferrand,

    Yeah, I cannot offer you a solution with the email and phone below the logo, unfortunately.

    Best regards,
    Victoria

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