• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 76
  • Last Modified:

Responsive Item Placement on hero image and different screen sizes

Here's the page: https://www.stadriemblems.com/products/custom-enamel-pins/

As you can see on this page, I have text overlayed on this hero image, and in the code you'll see that the placement is defined as such

data-x="['-350','left','center','center']"

There are four different breaks where it changes. The problem is that the largest size is just too broad. If you start resizing the browser window, it doesn't take long for the text to get cut off on the left because it's still obeying the -350 requirement, (Note that I have a 27" 4k monitor).

Is this pulling from the master bootstap media query definitions? If so, is there a way to override it and define the breaks right in this code?

Also, is there a way to control which section of the image is displays at different screen sizes? When you shrink it down to phone size, all you really see is the woman's hand.

Am I making an sense at all?
0
Marisa
Asked:
Marisa
  • 5
  • 3
  • 3
2 Solutions
 
lenamtlCommented:
Hi,
I highly recommend you to use
the slider revolution visual editor  https://codecanyon.net/item/slider-revolution-jquery-visual-editor-addon/13934907
Otherwise all the calculation can be very very complicated.
This have a lot of settings so you can customize for your need.
I did several responsive website with revolution slider and this tool is the best to have good result and save a lot of times...
0
 
Slick812Commented:
greetings  Marisa, , I got your custom pins page on my android phone in portrait, and what you call the "hero Image" was all but invisible, could only see the wrist and hand,  worst than that was the "overlay Text", it not only was too far to left off screen, but also the three text segments were overlaping covering each other and I could not read them! !  Although there may be a fix to get the text to be not off left, , , If I were you I would remove the entire top "Hero Image" and all text overlay things, as they do not seem important to selling your pin products. And redesign the page to be easy to see in phones, and make buying your pins as straight forward (easy) as posible
0
 
MarisaWeb DesignAuthor Commented:
@lenamtl:
Will this require me to start over and build something fresh, or will it somehow integrate with my existing code?

@Slick812:
I haven't even gotten to the phone screen size yet. I know it's messed up. I've only touched the overlay text for the largest screen size, which is what my question is pertaining to. Although the very last thing I asked is how to control which section of the image is displayed at different screen sizes, because I know all you really see is the woman's hand at that size. I'm trying to do this one section at a time. And also find out if it's even possible to control which section of the image is displayed at different screen sizes. Because if it's not, I may have to use a different slider.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Slick812Commented:
you might try to change this -
        data-x="['-350','left','center','center']"

to this -
      data-x="['-3','left','center','center']"

BUT that may change the location for widths that it was working for ? ?

It seems that this hero Image and overlay text has problems at all widths ? ? That is why I recomeneded to remove the Image part, as it does not seem to have anything to do with your product, and is a problem for the site development, extra work for you to what ened?
0
 
lenamtlCommented:
You will need to start over
but this will take you less time to redo it than to make it work correctly as the application do all calculation for you.
Plus all text animation and other effect are lot easier with the tool and will be applied correctly for all device screen size.
It's take only a few minutes ...

You seems to have only one slide or very fee one.
What you can do is to start a new project in the editor based on your need
You can add a transparent layer for the form
let say import the image and add the text which is not long to do in the editor
then generate the code add it to your page and from there add the code of the form

BTW I'm not sure that having a form inside a slider is a good idea....
What you can do is to a have a button that open the form outside the slider this can save you some headache...

Note: When using the editor the first time it's required some installation and some reading.
you can check their demo http://rsvisualeditor.themepunch.com/
0
 
lenamtlCommented:
Another solution if you don't have other slide is not to use revolution slider
and use bootstrap column with a image as the background plus some CSS animation for the text.
0
 
MarisaWeb DesignAuthor Commented:
Hi lenamtl,
I will try the visual editor and see how it goes. And I don't know why I didn't think of the fact that I could just use html and css, seeing as I only have one slide. Duh. I'll report back on how the visual editor goes first.
0
 
MarisaWeb DesignAuthor Commented:
OK, I've gotten so off track with this issue that I need to bring it back to the simple thing I was asking originally. I'll word it as simply as possible.

1) Where is the spot in the rev slider code where I can define my own custom viewports/media queries?
2) Where is the spot in the code where I can tell the image to resize within the space, rather than it getting cut off?

That's all I really need. Sorry if I over-explained in the beginning.

(NOTE that the themepunch plugin did not work for me, as I cannot even get to the installation page because nginx isn't configured to serve php files as a default index page. Not only that, but I do not have permissions to create databases on my site.)
0
 
Slick812Commented:
OK, I am posting this code because no one else is saying anything.
I do not expect this code to be what you want, but it is a way to have your hero image and the <form> to order, and some layered overlays of text.   This code works but it does need more details to be refined, for smaller phone widths.
<style>
#topOrderForm {
margin-top: 48px;
}

#imageSize {
position: relative;
margin: 0 auto;
max-width: 1355px;
overflow: hidden;
/*background: #4c78b7;*/
}

#imageSize em {
display: inline-block;
height: 700px;
vertical-align: top;
}

#layers img {
width: 100%;
position: relative;
border-radius: 9px;
}

#layers {
position: relative;
display:inline-block;
width: 99.7%;
vertical-align: top;
}

#topOver {
position: absolute;
left: 11px;
top: 11px;
width: 56%;
max-width: 19em;
font-size: 131%;
font-weight: bold;
}

#midOver {
position: absolute;
left: 11px;
bottom: 111px;
color: #fff;
width: 17em;
/*font-size: 111%;*/
font-weight: bold;
}

#rightOver {
position: absolute;
right: 352px;
bottom: 61px;
color: #daa;
font-weight: bold;
}

#bottomtOver {
position: absolute;
left: 11px;
bottom: 11px;
color: #fff;
width: 23em;
/*font-size: 111%;*/
font-weight: bold;
}

#sale {
display: none;
}

#quoteForm {
position: absolute;
top: 1px;
right: 0px;
height: 700px;
width: 345px;
text-align: center;
background: #eee;
}


@media screen and (max-width: 908px){#imageSize img {left: -9.5%;}}
@media screen and (max-width: 788px){
#imageSize img {left: 0px;} 
#quoteForm {position:relative; margin: 0 auto; }
#imageSize em {display: none;}
#rightOver {right:12px;}
#topOver {width: 95%; max-width: 100%;}
}
@media screen and (max-width: 572px){
#rightOver {display: none;}
#midOver {top:initial; bottom:12px;}
#bottomtOver {display:none;}
#sale {display: block;}
 }
</style>

<div id="topOrderForm">
<div id="imageSize">
<div id="layers">
<img src="landing-enamel-pins2.jpg" />
<div id="topOver">Your Search is over for Top Quality Enamel Pins that won't Break your Budget!</div>
<div id="midOver">Join thousands of artists who've let our 40+ years of experience help them design the perfect enamel pin</div>
<div id="rightOver">100 ENAMEL PINS @ 1"<br>ONLY $125</div>
<div id='bottomtOver'>Don't need that many? That's fine! We have the guaranteed lowest prices for every size and quantity. Request a quote now or check out our pricelist below!</div>
</div><em></em><div id="sale">100 ENAMEL PINS @ 1" FOR ONLY $125<br/>Don't need that many? That's fine! We have the guaranteed lowest prices for every size and quantity. Request a quote now or check out our pricelist below!</div>
<div id="quoteForm">
<h2 class="form_title"> GET QUOTE NOW!</h2>
<form class="inner quote-form-front" method="post" enctype="multipart/form-data" action="/products/custom-enamel-pins/" id="se_quote_form">
<div class="error-messages size-errors"></div>
<div id="label_type_selector"></div><input type='hidden' name='csrfmiddlewaretoken' value='ghpQue8W0OjmUZMGKPQkqrdfK1LNmLFM' />
<div class="form-group full_name-wrapper"><input class="form-control " id="id_full_name" name="full_name" placeholder="Full Name" type="text" />
</div>
<div class="form-group email-wrapper"><input class="form-control " id="id_email" name="email" placeholder="Email" type="email" /></div>
<div class="form-group phone-wrapper"><input class="form-control " id="id_phone" name="phone" placeholder="Phone" type="text" /></div>
<div class="form-group width-wrapper"><input class="form-control " id="id_width" name="width" placeholder="Width" step="any" type="number" /></div>
<div class="form-group height-wrapper"><input class="form-control " id="id_height" name="height" placeholder="Height" step="any" type="number" /></div>
<div class="form-group process-wrapper">
<select class="form-control " data-header="Process" id="id_process" name="process" placeholder="Process" title="Process">
<option value="Hard Enamel">Hard Enamel</option
option value="Soft Enamel">Soft Enamel</option
option value="Diestruck">Diestruck</option>
<option value="Silkscreen">Silkscreen</option></select></div>
<div class="form-group metal-wrapper">
<select class="form-control " data-header="Metal" id="id_metal" name="metal" placeholder="Metal" title="Metal">
<option value="Gold">Gold</option>
<option value="Silver">Silver</option>
<option value="Copper">Copper</option>
<option value="Antique Gold">Antique Gold</option>
<option value="Antique Silver">Antique Silver</option>
<option value="Antique Copper">Antique Copper</option>
<option value="Brass">Brass</option>
<option value="Chrome">Chrome</option>
<option value="Black Nickel">Black Nickel</option>
<option value="Satin Nickel">Satin Nickel</option>
<option value="Sandblasting Nickel">Sandblasting Nickel</option>
<option value="Satin Gold">Satin Gold</option>
<option value="Satin Silver">Satin Silver</option>
<option value="Foggy Painting Gold">Foggy Painting Gold</option>
<option value="Unsure / Let Stadri Choose">Unsure / Let Stadri Choose</option></select></div>
<div class="form-group backing-wrapper">
<select class="form-control " data-header="Backing" id="id_backing" name="backing" placeholder="Backing" title="Backing">
<option value="Butterfly Clutch">Butterfly Clutch</option>
<option value="Safety Pin">Safety Pin</option>
<option value="Jump Ring">Jump Ring</option>
<option value="Tie Clip">Tie Clip</option>
<option value="Tie Tack">Tie Tack</option>
<option value="Key Ring">Key Ring</option>
<option value="Screw Post">Screw Post</option>
<option value="Magnet">Magnet</option>
<option value="Rubber">Rubber</option>
<option value="Earring">Earring</option>
<option value="Belt Buckle">Belt Buckle</option></select></div>
<div class="form-group colors-wrapper">
<select class="form-control " data-header="Colors" id="id_colors" name="colors" placeholder="Colors" title="Colors">
<option value="1-4 (included free)">1-4 (included free)</option><option value="5 Colors (add 15¢ ea)">5 Colors (add 15¢ ea)</option><option value="6 Colors (add 30¢ ea)">6 Colors (add 30¢ ea)</option><option value="7 Colors (add 45¢ ea)">7 Colors (add 45¢ ea)</option><option value="8 Colors (add 60¢ ea)">8 Colors (add 60¢ ea)</option></select></div>
<div class="form-group product_quantity-wrapper"><input class="form-control " id="id_product_quantity" min="1" name="product_quantity" placeholder="Product Quantity" type="number" /></div>
<div class="form-group artwork-wrapper"><input class="form-control " id="id_artwork" name="artwork" placeholder="Upload Image" type="file" /></div>
<div class="form-group artwork2-wrapper"><input class="form-control " id="id_artwork2" name="artwork2" placeholder="Upload Additional Image" type="file" /></div>
<div class="form-group needby-wrapper"><input class="form-control  datepicker" id="id_needby" name="needby" placeholder="Need By" type="text" /></div>
<div class="form-group discount_code-wrapper"><input class="form-control " id="id_discount_code" maxlength="20" name="discount_code" placeholder="Discount Code" type="text" /></div><input type="hidden" value="custom-enamel-pins" id="product_form_slug" name="product_form_slug"><input class="button btn_lg btn_blue btn_full quote_submit" type="submit"
               value="GET QUOTE NOW"/></form><input type="hidden" value="custom-enamel-pins" id="product_slug"><input type="hidden" value="" id="product_attributes">
</div>

</div>
</div>

Open in new window

this is the resized I mage I usedthat is the Image resized I used
0
 
MarisaWeb DesignAuthor Commented:
Thank you so much! I will try to work with this today and see how it goes.
0
 
MarisaWeb DesignAuthor Commented:
Thank you so much for your contributions. I fought with this code almost all day yesterday, but because of my own inadequacies, I am unable to get it to do what I need. I will likely hire an expert on here to do it for me. Thanks again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 5
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now