Jump to content

Archived

This topic is now archived and is closed to further replies.

selmakdesign

Make media box image centralized on all screen sizes

Recommended Posts

selmakdesign

Hello!

 

I would need someones word of advice on this issue I am having. I'm using the media box to add an image with a link, and I would like the image height always to stay the same on all screen sizes while the overflow to the left and right is hidden. As for now the image scales down to fit all screen sizes. The domain is http://hatech.selmakdesign.se/kontakt

 

1. what it looks like now: fixed%20width.png   2. what I'm trying to do: fixed%20width%20-%20kopia.png

 

(Basically my client wants a map image that opens the googel maps app upon touch on smartphones, the regular map doesn't do that.)

 

ps. I've actually managed to get a fixed height by adding the image to a textbox instead, but then I couldn't find a way to get the image to stay centred on all screen sizes! This is really driving me nuts right now :)

 

Grateful for any input!! :) :) :)

Share this post


Link to post
Share on other sites
Danny

Hi,

 

You can't as far as I am aware set the Maps section to be a specific zoom on specific devices. To achieve this you're going to need to look at using something else. I would suggest asking this question on the Google Maps forum - https://productforums.google.com/forum/#!forum/maps


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
selmakdesign

Sorry you got my question wrong :)

 

What you are seing is a snapshot from google maps. So it's just a static image added to the MediaBox with google maps link attached to it, and I would like for this image to not reduce in height on smaller screens, but instead show a fixed height.

 

 

 

Adding the image to a textbox this works fine, the image stays the correct size at all times, BUT then I can't make it centered inspite of selecting center alignment! 

 

inline CSS -> min-height: 164px !important; width: 768px !important; overflow: hidden; text-align: center;

 

So whichever is the easiest: centralizing the image in a textbox OR fixed image size using Mediabox

 

map.png

Share this post


Link to post
Share on other sites
Danny

OK, to do that you're going to want to target that MediaBox using media queries and then apply your custom CSS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
selmakdesign

I've tried several css codes, no luck so far and I'm not sure what you mean by media queries. I would really appreciate some elaboration on that :)

Share this post


Link to post
Share on other sites
selmakdesign

Oh alright yes I have all that. The media query is that this image is not displayed on screens larger than the ipad. That's all fine. It's the actual size of the image and it not being centered inspite of every possible css code I've added. I am typing in all kinds of custom css codes, but now getting any closer to a resolution

Share this post


Link to post
Share on other sites
Danny

Im still not sure why you're having isses with your image not resizing. I have just this moment added a insanely large image of space to a MediaBox.

 

http://quick.as/dxjgUmbG

 

If you want to move the position of the image you will need to add the image via CSS and use background-position: 0 0; as far as I am aware you're unable to move the placement of the image via CSS when it has been added via an img tag.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
selmakdesign

Oh well, lol, we are not using the same language. I must not be expressing myself properly ;)

 

The image is resizing, and that's exactly what I DON'T want it to do :)

 

I'm trying to get it to NOT resize so that it's always showing the same height WHILE STAYING CENTERED. You see I've managed to give it that fixed height, but I've not managed to to get it to be centered in smaller screen sizes

 

So here we go: I've added the same image twice while testing custom css. Image 1 is the image added via textbox and image 2 is the same added via mediabox. I haven't added any css to image 2, to image 1 I've added the followign CSS:

 

min-height: 164px !important; width: 768px !important; overflow: hidden; text-align: center;

 

The alignment is also set to center

 

This is the view on the iPad:

 

1.png

 

And here's the iPhone view:

 

2.png

 

 

Image 2 is resising as it should because I haven't added any CSS. Image 1 is not resizing which is what I want, BUT IT'S ALSO NOT CENTERED!

 

Serisously I've tried any css code I could think of to center it, I hope this makes sense :p

 

Share this post


Link to post
Share on other sites
Danny

Yeah you're not going to be able to use CSS as far as I am aware to reposition that image, as it is being used via an img tag. The best thing to do is the following:

 

Copy the URL of that image

Now load up a MediaBox section and add something like this into it.

 

<div class="my-map-img"></div>

 

Now use CSS to add that background image to that div for example:

 

.my-map-img {

  background-image: url( ...);

  background-position: ... ... ;

  background-repear: ... ;

}

 

Then target that class with a media query and then change the background-position with pixels to fine tune its position when viewed on a mobile device or small width screen.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
selmakdesign

Final update on this thread! Here's the code that made it work for me!  :geek: 

 

HTML:

 

<div class="my-map-block">
<a id="map-link" href="#"></a> /*I added a regular link because my map image should link to google maps*/
</div>
 
CSS:
 
.my-map-block {
height: 164px;
text-align: center;
background: #33363b;
border: 0px;
margin-bottom: 20px;
background-image: url(http://hatech.selmakdesign.se/wp-content/uploads/2014/09/map_768px.jpg);
background-position: center;
background-repeat: no-repeat;
}
#map-link {
position: absolute;
top: 40px;
left: 0;
width: 768px;
height: 120px;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
border: 1px solid yellow; /*I've added a border while testing the link position, the border will be set to 0px when I'm done editing*/
}
 
Thank you for your infinite patience Danny and the tip about the background image!   :bow:

Share this post


Link to post
Share on other sites
Danny

No problem! :D


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • Paul
      By Paul+
      I have woocommerce store, product shows title and price fine until reduce screen with on a tablet/mobile phone the price and title gets removed?  Any ideas? 
      Here's an example page: https://thelaptopfixers.com/product/operating-system-re-install/
      Try it on both desktop PC browser then resize to mobile/cell phone size!  
      Thanks
    • kwaoru
      By kwaoru
      Hi,
      I desperately need to deactivate the responsive function on mobile for reasons. It looks so messy with the responsive look on mobile and not navigating or informative at all as it is. 
      I searched for solutions online and tries some of those that I found but nothing worked out. Also I found a previous post on this forum says that this theme pagelines DMS is not meant to be build to deactivate the responsive function... 
      Also tried with widget such as WPtouch to edit the mobile look a little more informative but as I am using "single page" theme on pagelines, the frontpage(main page) never appears on those app.
      Seems like not compatible?
      If there is no way to deactivate responsive function or I'll have to recreate another page just dedicated for a mobile page? or change the theme completely and build a page from scratch?
      I have been searching for this for two days already...
      Could anyone wise and kind out there, please help me?
       
      Thanks,
×